解决微信及360浏览器无法读取本地图片问题

转载 2014年09月10日 19:54:47

近期做移动端项目发现360浏览器及微信不能读取本地图片,究其原因是无法获取文件格式,导致base64编码时文件头丢失文件类型信息,无法生成正确的图片编码,所以添加文件头即可解决此问题。

正确的编码

data:image/jpeg;base64,...

微信的编码

data:;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>

web项目发布到IIS上 360浏览器不兼容jQuery的解决办法

在Web应用的开发过程中,发现若干页面在360的浏览器上显示不正常,而在其他的浏览器上,皆为正常状态,问题出在哪里呢? 问题的提出:      Web页面在360的浏览器上,显示不正确。 ...
  • mikun
  • mikun
  • 2015年09月18日 09:57
  • 3116

兼容微信浏览器的本地图片上传预览

随着移动设备的普及,越来越多的应用需要适应移动端来构建,包括相应的前端页面。在进行web前端页面开发的过程中,免不了会使用图片上传并在上传前预览的功能,有前辈已经给出了多浏览器兼容的图片上传代码,我们...
  • hjb2722404
  • hjb2722404
  • 2015年04月07日 13:52
  • 2245

最全整理浏览器兼容性问题与解决方案

常见浏览器兼容性问题与解决方案   所谓的浏览器兼容性问题,是指因为不同的浏览器对同一段代码有不同的解析,造成页面显示效果不统一的情况。在大多数情况下,我们的需求是,无论用户用什么浏览器来查看我们的...
  • u010427666
  • u010427666
  • 2016年05月25日 17:37
  • 10375

解决微信及360浏览器无法读取本地图片问题

近期做移动端项目发现360浏览器及微信不能读取本地图片,究其原因是无法获取文件格式,导致base64编码时文件头丢失文件类型信息,无法生成正确的图片编码,所以添加文件头即可解决此问题。 正确的编...
  • dayu9216
  • dayu9216
  • 2017年06月22日 14:15
  • 309

页面在360浏览器下的兼容性问题解决

引言: 在Web应用的开发过程中,发现若干页面在360的浏览器上显示不正常,而在其他的浏览器上,皆为正常状态,问题出在哪里呢?...
  • blueheart20
  • blueheart20
  • 2014年05月26日 14:09
  • 33843

页面在360浏览器下的兼容性问题解决【转】

引言:  在Web应用的开发过程中,发现若干页面在360的浏览器上显示不正常,而在其他的浏览器上,皆为正常状态,问题出在哪里呢?   问题的提出:      Web页面在360的浏览...
  • alanwake555
  • alanwake555
  • 2015年05月18日 14:17
  • 551

解决360浏览器中input框字体颜色不变问题

1. html页面: ...
  • u012054869
  • u012054869
  • 2017年12月28日 17:43
  • 42

360浏览器下的页面兼容性问题以及解决方法

引言:  在Web应用的开发过程中,发现若干页面在360的浏览器上显示不正常,而在其他的浏览器上,皆为正常状态,问题出在哪里呢? 问题的提出:      Web页面在360的浏览器上,显示不正确。...
  • ydm19891101
  • ydm19891101
  • 2016年06月21日 13:02
  • 630

360浏览器登录新浪微博图标显示为字母及占用CPU过高问题的解决

问题:使用360安全浏览器登录网页版新浪微博,页面里的图标显示为英文字母 解决: 打开360浏览器的设置,点击【实验室】选项,在右边系统那一项,把【开启DirectWrite高清字体渲染支持...
  • DearMorning
  • DearMorning
  • 2017年01月10日 17:05
  • 1044

解决360浏览器兼容模式的页面显示问题

(我比较纳闷,360的兼容模式这么狗屎,为什么还有存在的必要性……) 由于众所周知的情况,国内的主流浏览器都是双核浏览器:基于Webkit内核用于常用网站的高速浏览。基于IE的内核用于兼容网银、...
  • sinianliushui
  • sinianliushui
  • 2017年05月17日 12:39
  • 249
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:解决微信及360浏览器无法读取本地图片问题
举报原因:
原因补充:

(最多只允许输入30个字)