php实现图片以base64显示的方法达到效果
目前Data URI scheme支持的类型有:
data:text/plain,文本数据
data:text/html,HTML代码
data:text/html;base64,base64编码的HTML代码
data:text/css,CSS代码
data:text/css;base64,base64编码的CSS代码
data:text/javascript,javascript代码
data:text/javascript;base64,base64编码的Javascript代码
data:image/gif;base64,base64编码的gif图片数据
data:image/png;base64,base64编码的png图片数据
data:image/jpeg;base64,base64编码的jpeg图片数据
data:image/x-icon;base64,base64编码的icon图片数据
php代码如下:
$img_file = 'https://img.alicdn.com/bao/uploaded/TB1eaiELpXXXXcPXpXXSutbFXXX.jpg';
$img_info = getimagesize($img_file);
$img_src = "data:{$img_info['mime']};base64," . base64_encode(file_get_contents($img_file));
exit("<img src='{$img_src}' />");
PS:这里再为大家推荐几款在线图片工具供大家参考使用
图片转换为Base64编码在线工具:
http://tools.jb51.net/transcoding/img2base64
在线Email邮箱图标制作工具:
http://tools.jb51.net/email/emaillogo
在线PS图像处理工具:
http://tools.jb51.net/aideddesign/webps
在线图片格式转换(jpg/bmp/gif/png)工具:
http://tools.jb51.net/aideddesign/picext
ICO图标在线生成工具:
http://tools.jb51.net/aideddesign/ico_img
一、分页方法
/**
* TODO 基础分页的相同代码封装,使前台的代码更少
* @param $m 模型,引用传递
* @param $where 查询条件
* @param int $pagesize 每页查询条数
* @return \Think\Page
*/
function getpage(&$m,$where,$pagesize=10){
$m1=clone $m;//浅复制一个模型
$count = $m->where($where)->count();//连惯操作后会对join等操作进行重置
$m=$m1;//为保持在为定的连惯操作,浅复制一个模型
$p=new Think\Page($count,$pagesize);
$p->lastSuffix=false;
$p->setConfig('header','<li class="rows">共<b>%TOTAL_ROW%</b>条记录 每页<b>%LIST_ROW%</b>条 第<b>%NOW_PAGE%</b>页/共<b>%TOTAL_PAGE%</b>页</li>');
$p->setConfig('prev','上一页');
$p->setConfig('next','下一页');
$p->setConfig('last','末页');
$p->setConfig('first','首页');
$p->setConfig('theme','%FIRST% %UP_PAGE% %LINK_PAGE% %DOWN_PAGE% %END% %HEADER%');
$p->parameter=I('get.');
$m->limit($p->firstRow,$p->listRows);
return $p;
}
getpage方法可以放在TP框架的 Application/Common/Common/function.php,这个文档可以专门放置一些通用的方法,在哪里都可以调用(如:Controller文件,View文件等)。
二、调用分页方法
$m=M('products');
$p=getpage($m,$where,10);
$list=$m->field(true)->where($where)->order('id desc')->select();
$this->list=$list;
$this->page=$p->show();
再是View代码
<div class="pagination">
{$page}
</div>
三、最后就是分页的样式了,这个有些乱,因后台框架网上下载的,样式还没来的及整理,这个样式也可以自己实现,简单的。
.pagination ul {
display: inline-block;
margin-bottom: 0;
margin-left: 0;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.05);
-moz-box-shadow: 0 1px 2px rgba(0,0,0,0.05);
box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}
.pagination ul li {
display: inline;
}
.pagination ul li.rows {
line-height: 30px;
padding-left: 5px;
}
.pagination ul li.rows b{color: #f00}
.pagination ul li a, .pagination ul li span {
float: left;
padding: 4px 12px;
line-height: 20px;
text-decoration: none;
background-color: #fff;
background: url('../images/bottom_bg.png') 0px 0px;
border: 1px solid #d3dbde;
/*border-left-width: 0;*/
margin-left: 2px;
color: #08c;
}
.pagination ul li a:hover{
color: red;
background: #0088cc;
}
.pagination ul li.first-child a, .pagination ul li.first-child span {
border-left-width: 1px;
-webkit-border-bottom-left-radius: 3px;
border-bottom-left-radius: 3px;
-webkit-border-top-left-radius: 3px;
border-top-left-radius: 3px;
-moz-border-radius-bottomleft: 3px;
-moz-border-radius-topleft: 3px;
}
.pagination ul .disabled span, .pagination ul .disabled a, .pagination ul .disabled a:hover {
color: #999;
cursor: default;
background-color: transparent;
}
.pagination ul .active a, .pagination ul .active span {
color: #999;
cursor: default;
}
.pagination ul li a:hover, .pagination ul .active a, .pagination ul .active span {
background-color: #f0c040;
}
.pagination ul li.last-child a, .pagination ul li.last-child span {
-webkit-border-top-right-radius: 3px;
border-top-right-radius: 3px;
-webkit-border-bottom-right-radius: 3px;
border-bottom-right-radius: 3px;
-moz-border-radius-topright: 3px;
-moz-border-radius-bottomright: 3px;
}
.pagination ul li.current a{color: #f00 ;font-weight: bold; background: #ddd}
php实现图片以base64显示的方法达到效果的更多相关文章
- [RF] 安装好Robot Framework之后怎样让启动的界面后面不带命令行窗口,且图片以机器人显示
安装好Robot Framework之后,通过 C:\Python27\Scripts\ride.py 启动时会带上一个命令行窗口: 怎样让启动的界面后面不带这个命令行窗口,且图片以机器人显示? 方法 ...
- 一种让超大banner图片不拉伸、全屏宽、居中显示的方法
现在很多网站的Banner图片都是全屏宽度的,这样的网站看起来显得很大气.这种Banner一般都是做一张很大的图片,然后在不同分辨率下都是显示图片的中间部分.实现方法如下: <html> ...
- 图片转换base64数据上传,并且实现预览的简便方法
对于很多新手来说,实现上传图片并且预览功能,都会感到不知所可,然后开始在网站搜索各种各样的图片上传预览插件,但是有的时候我们只是想简单的实现判断格式,以及预览的功能,使用插件的话,会使得项目的资源空间 ...
- 织梦DEDECMS更换目录后页面内的图片和缩略图无法显示解决方法
http://www.win8f.com/seoyouhua/6609.html 很多人碰到织梦更换目录后内容图片和缩略图无法显示的问题,在此,慧鸿网络特地搜集整理了一篇关于织梦出现缩略图和内容无法显 ...
- jquery 图片文件转base64 显示
<!DOCTYPE html> <html> <head> <meta name="viewport" content="wid ...
- [转]一种让超大banner图片不拉伸、全屏宽、居中显示的方法
现在很多网站的Banner图片都是全屏宽度的,这样的网站看起来显得很大气.这种Banner一般都是做一张很大的图片,然后在不同分辨率下都是显示图片的中间部分.实现方法如下: <html> ...
- 上传附件(图片base64)封装方法
上传附件(图片base64)封装方法 php 上传附件,base64 项目中封装的接口: public function error($msg){ header("Content-type: ...
- dedecms5.7二级域名文章图片不显示修改方法.相对路径改为绝对路径的方法
dedecms5.7(织梦CMS5.7)二级域名文章图片不显示修改方法.相对路径改为绝对路径的方法 dedecms升级到5.7SP1后,开启二级域名,你会发现,在二级域名下的文章,上传的图片地址都是: ...
- 转载 | 一种让超大banner图片不拉伸、全屏宽、居中显示的方法
现在很多网站的Banner图片都是全屏宽度的,这样的网站看起来显得很大气.这种Banner一般都是做一张很大的图片,然后在不同分辨率下都是显示图片的中间部分.实现方法如下: <html> ...
随机推荐
- 计算机基础(day02)
目录 什么是编程? 计算机的组成 CPU(大脑) 控制器 运算器 存储器 主存 外存 IO设备 input设备(输入设备) output设备(输出设备) 多核cpu 32位和64位 机械硬盘工作原理 ...
- SPSS分析技术:CMH检验(分层卡方检验);辛普森悖论,数据分析的谬误
SPSS分析技术:CMH检验(分层卡方检验):辛普森悖论,数据分析的谬误 只涉及两个分类变量的卡方检验有些时候是很局限的,因为混杂因素总是存在,如果不考虑混杂因素,得出的分析结论很可能是谬误的,这就是 ...
- jeecmsv8.1怎么修改项目后台访问地址
将jeeadmin/jeecms/index.do 改为admin/index.do为例 1.修改WebContent\WEB-INF\web.xml <servlet-mapping> ...
- Maven实战03_Maven使用入门
1:pom.xml Maven项目的核心文件,非常重要.POM(Project Object Model)项目对象模型,其定义了项目的基本信息,用于描述项目如何构建,声明项目依赖等等. 创建一个最简单 ...
- WCF简要介绍
什么是WCF WCF的全称是:Windows Communication Foundation.从本质上来说,它是一套软件开发包,是微软公司推出的符合SOA思想的技术框架.WCF为程序员提供了丰富的功 ...
- Leetcode147. Insertion Sort List对链表进行插入排序
对链表进行插入排序. 从第一个元素开始,该链表可以被认为已经部分排序(用黑色表示). 每次迭代时,从输入数据中移除一个元素(用红色表示),并原地将其插入到已排好序的链表中. 插入排序算法: 插入排序是 ...
- Leetcode543.Diameter of Binary Tree二叉树的直径
给定一棵二叉树,你需要计算它的直径长度.一棵二叉树的直径长度是任意两个结点路径长度中的最大值.这条路径可能穿过根结点. 示例 : 给定二叉树 1 / \ 2 3 / \ 4 5 返回 3, 它 ...
- Vue-cli3.x在开发环境中(router采用 history模式)出现Failed to resolve async component default: Error: Loading chunk {/d} failed.或者Uncaught SyntaxError: Unexpected token <错误
使用Vue-cli3.x开发环境中(router采用 history模式)出现Failed to resolve async component default: Error: Loading chu ...
- 用VUE监听数组和对象的变化
看一下演示代码,先是增加数组和对象. <template> <div> <p>这是我定义的数组</p> <div>{{this.arr}}& ...
- Codeforces 455B
题目链接 B. A Lot of Games time limit per test 1 second memory limit per test 256 megabytes input standa ...