base64 | 吕神的自我修养

解决微信及360浏览器无法读取本地图片问题【js base64 图片压缩】

2016.11.29

解决微信及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,)加速网页加载的方法

2014.12.23

利用Data URL(data:image/jpg;base64,)base64形式存储图片,将小图片生成数据流形式

先来看下下边这段代码：

其实“data:image/gif;base64,R0lGODlhJ……” 就是一张图片的Data URL，就是利用base64编码把图片数据翻译成标准ASCII字符。
等同于：

显示结果：

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编码的图片内容

2014.12.23

<?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>