解决微信及360浏览器无法读取本地图片问题【js base64 图片压缩】
解决微信及360浏览器无法读取本地图片问题【js base64 图片压缩】
<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0"> <title>图片压缩</title> <style> body { margin:0; padding:0; } html { font-size:62.5%; } .imgzip { padding:1em; } .imgzip .itm { padding-bottom:1em; word-break:break-all; font-size:1.2rem; line-height:1.5em; } .imgzip .itm .tit { margin-bottom:.5em; background-color:#e71446; color:#FFF; padding:.5rem 1rem; border-radius:3px; } .imgzip .itm .cnt { padding:1rem; } .imgzip .itm .cnt img { display:block; max-width:100%; } .imgzip textarea { width:100%; height:20em; } </style> </head> <body> <input type="file" accept="image/*;capture=camera" class="input"> <div class="imgzip"></div> <script> document.addEventListener('DOMContentLoaded', init, false); function init() { var u = new UploadPic(); u.init({ input: document.querySelector('.input'), callback: function (base64) { var html = ''; html = '<div class="itm"><div class="tit">图片名称:</div><div class="cnt">' + this.fileName + '</div></div>' + '<div class="itm"><div class="tit">原始大小:</div><div class="cnt">' + (this.fileSize / 1024).toFixed(2) + 'KB<\/div><\/div>' + '<div class="itm"><div class="tit">编码大小:</div><div class="cnt">' + (base64.length / 1024).toFixed(2) + 'KB<\/div><\/div>' + '<div class="itm"><div class="tit">原始尺寸:</div><div class="cnt">' + this.tw + 'px * ' + this.th + 'px<\/div><\/div>' + '<div class="itm"><div class="tit">编码尺寸:</div><div class="cnt">' + this.sw + 'px * ' + this.sh + 'px<\/div><\/div>' + '<div class="itm"><div class="tit">图片预览:</div><div class="cnt"><img src="' + base64 + '"><\/div><\/div>' + '<div class="itm"><div class="tit">Base64编码:</div><div class="cnt"><textarea>' + base64 + '<\/textarea><\/div><\/div>'; document.querySelector('.imgzip').innerHTML = html; }, loading: function () { document.querySelector('.imgzip').innerHTML = '读取中,请稍候...'; } }); } function UploadPic() { this.sw = 0; this.sh = 0; this.tw = 0; this.th = 0; this.scale = 0; this.maxWidth = 0; this.maxHeight = 0; this.maxSize = 0; this.fileSize = 0; this.fileDate = null; this.fileType = ''; this.fileName = ''; this.input = null; this.canvas = null; this.mime = {}; this.type = ''; this.callback = function () {}; this.loading = function () {}; } UploadPic.prototype.init = function (options) { this.maxWidth = options.maxWidth || 800; this.maxHeight = options.maxHeight || 600; this.maxSize = options.maxSize || 3 * 1024 * 1024; this.input = options.input; this.mime = {'png': 'image/png', 'jpg': 'image/jpeg', 'jpeg': 'image/jpeg', 'bmp': 'image/bmp'}; this.callback = options.callback || function () {}; this.loading = options.loading || function () {}; this._addEvent(); }; /** * @description 绑定事件 * @param {Object} elm 元素 * @param {Function} fn 绑定函数 */ UploadPic.prototype._addEvent = function () { var _this = this; function tmpSelectFile(ev) { _this._handelSelectFile(ev); } this.input.addEventListener('change', tmpSelectFile, false); }; /** * @description 绑定事件 * @param {Object} elm 元素 * @param {Function} fn 绑定函数 */ UploadPic.prototype._handelSelectFile = function (ev) { var file = ev.target.files[0]; this.type = file.type // 如果没有文件类型,则通过后缀名判断(解决微信及360浏览器无法获取图片类型问题) if (!this.type) { this.type = this.mime[file.name.match(/\.([^\.]+)$/i)[1]]; } if (!/image.(png|jpg|jpeg|bmp)/.test(this.type)) { alert('选择的文件类型不是图片'); return; } if (file.size > this.maxSize) { alert('选择文件大于' + this.maxSize / 1024 / 1024 + 'M,请重新选择'); return; } this.fileName = file.name; this.fileSize = file.size; this.fileType = this.type; this.fileDate = file.lastModifiedDate; this._readImage(file); }; /** * @description 读取图片文件 * @param {Object} image 图片文件 */ UploadPic.prototype._readImage = function (file) { var _this = this; function tmpCreateImage(uri) { _this._createImage(uri); } this.loading(); this._getURI(file, tmpCreateImage); }; /** * @description 通过文件获得URI * @param {Object} file 文件 * @param {Function} callback 回调函数,返回文件对应URI * return {Bool} 返回false */ UploadPic.prototype._getURI = function (file, callback) { var reader = new FileReader(); var _this = this; function tmpLoad() { // 头不带图片格式,需填写格式 var re = /^data:base64,/; var ret = this.result + ''; if (re.test(ret)) ret = ret.replace(re, 'data:' + _this.mime[_this.fileType] + ';base64,'); callback && callback(ret); } reader.onload = tmpLoad; reader.readAsDataURL(file); return false; }; /** * @description 创建图片 * @param {Object} image 图片文件 */ UploadPic.prototype._createImage = function (uri) { var img = new Image(); var _this = this; function tmpLoad() { _this._drawImage(this); } img.onload = tmpLoad; img.src = uri; }; /** * @description 创建Canvas将图片画至其中,并获得压缩后的文件 * @param {Object} img 图片文件 * @param {Number} width 图片最大宽度 * @param {Number} height 图片最大高度 * @param {Function} callback 回调函数,参数为图片base64编码 * return {Object} 返回压缩后的图片 */ UploadPic.prototype._drawImage = function (img, callback) { this.sw = img.width; this.sh = img.height; this.tw = img.width; this.th = img.height; this.scale = (this.tw / this.th).toFixed(2); if (this.sw > this.maxWidth) { this.sw = this.maxWidth; this.sh = Math.round(this.sw / this.scale); } if (this.sh > this.maxHeight) { this.sh = this.maxHeight; this.sw = Math.round(this.sh * this.scale); } this.canvas = document.createElement('canvas'); var ctx = this.canvas.getContext('2d'); this.canvas.width = this.sw; this.canvas.height = this.sh; ctx.drawImage(img, 0, 0, img.width, img.height, 0, 0, this.sw, this.sh); this.callback(this.canvas.toDataURL(this.type)); ctx.clearRect(0, 0, this.tw, this.th); this.canvas.width = 0; this.canvas.height = 0; this.canvas = null; }; </script> </body> </html>
利用Data URL(data:image/jpg;base64,)加速网页加载的方法
利用Data URL(data:image/jpg;base64,)base64形式存储图片,将小图片生成数据流形式
先来看下下边这段代码:
<img src=”data:image/gif;base64,R0lGODlhJQAlAJECAL3L2AYrTv///wAAACH/C05FVFNDQVBFMi4wAwEAAAAh+QQFCgACACwAAAAA
JQAlAAACi5SPqcvtDyGYIFpF690i8xUw3qJBwUlSadmcLqYmGQu6KDIeM13beGzYWWy3DlB4IYaM
k+Dso2RWkFCfLPcRvFbZxFLUDTt21BW56TyjRep1e20+i+eYMR145W2eefj+6VFmgTQi+ECVY8iG
xcg35phGo/iDFwlTyXWphwlm1imGRdcnuqhHeop6UAAAIfkEBQoAAgAsEAACAAQACwAAAgWMj6nL
XAAh+QQFCgACACwVAAUACgALAAACFZQvgRi92dyJcVJlLobUdi8x4bIhBQAh+QQFCgACACwXABEA
DAADAAACBYyPqcsFACH5BAUKAAIALBUAFQAKAAsAAAITlGKZwWoMHYxqtmplxlNT7ixGAQAh+QQF
CgACACwQABgABAALAAACBYyPqctcACH5BAUKAAIALAUAFQAKAAsAAAIVlC+BGL3Z3IlxUmUuhtR2
LzHhsiEFACH5BAUKAAIALAEAEQAMAAMAAAIFjI+pywUAIfkEBQoAAgAsBQAFAAoACwAAAhOUYJnA
agwdjGq2amXGU1PuLEYBACH5BAUKAAIALBAAAgAEAAsAAAIFhI+py1wAIfkEBQoAAgAsFQAFAAoA
CwAAAhWUL4AIvdnciXFSZS6G1HYvMeGyIQUAIfkEBQoAAgAsFwARAAwAAwAAAgWEj6nLBQAh+QQF
CgACACwVABUACgALAAACE5RgmcBqDB2MarZqZcZTU+4sRgEAIfkEBQoAAgAsEAAYAAQACwAAAgWE
j6nLXAAh+QQFCgACACwFABUACgALAAACFZQvgAi92dyJcVJlLobUdi8x4bIhBQAh+QQFCgACACwB
ABEADAADAAACBYSPqcsFADs=
“>
其实“data:image/gif;base64,R0lGODlhJ……” 就是一张图片的Data URL,就是利用base64编码把图片数据翻译成标准ASCII字符。
等同于:
<img src=”http://www.lrxin.com/images/loading.gif”>
显示结果:
Data URL它现将图片转换成base64编码,以文本的形象随着文件加载。
再由浏览器在本地直接绘制图片,不是从服务器加载,所以节省了HTTP连接,起到加速网页的作用。
语法:
data:image/jpg; 声明数据协议及类型名称
base64, 编码形式为base64
/9j/4AAQSkZ…… base64编码结果
最后附上Data URL的生成方法(PHP):
<?php //php读取和保存base64编码的图片内容 header('Content-type:text/html;charset=utf-8'); //读取图片文件,转换成base64编码格式 //$image_file = './loading.gif'; $image_file = 'http://www.lrxin.com/images/loading.gif'; $image_info = getimagesize($image_file); $base64_image_content = "data:{$image_info['mime']};base64," . chunk_split(base64_encode(file_get_contents($image_file))); ?> <img src="<?php echo $base64_image_content;?>" />
需要注意:本方法适合于小图片,大图片就不要考虑了,另外IE8以下浏览器不支持这种方法。
用这种方法会加重客户端的CPU和内存负担,总之有利有弊。
IE8 之前的浏览器不支持 Data URL
在线生成工具:
http://www.greywyvern.com/code/php/binary2base64
http://www.kawa.net/works/js/data-scheme/base64-e.html
简单的说,data类型的Url大致有下面几种形式。
data:,<文本数据>
data:text/plain,<文本数据>
data:text/html,<HTML代码>
data:text/html;base64,<base64编码的HTML代码>
data:text/plain;charset=UTF-8;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读取和保存base64编码的图片内容
<?php //php读取和保存base64编码的图片内容 header('Content-type:text/html;charset=utf-8'); //读取图片文件,转换成base64编码格式 //$image_file = './loading.gif'; $image_file = 'http://www.lrxin.com/images/loading.gif'; $image_info = getimagesize($image_file); $base64_image_content = "data:{$image_info['mime']};base64," . chunk_split(base64_encode(file_get_contents($image_file))); //保存base64字符串为图片 //匹配出图片的格式 if (preg_match('/^(data:\s*image\/(\w+);base64,)/', $base64_image_content, $result)){ $type = $result[2]; $new_file = "./test.{$type}"; if (file_put_contents($new_file, base64_decode(str_replace($result[1], '', $base64_image_content)))){ echo '新文件保存成功:', $new_file ,'<br/>'; } } ?> <img src="<?php echo $base64_image_content;?>" /> <br/> <textarea style="width:80%; min-height:300px;"><?php echo $base64_image_content;?></textarea>