aaysi2826
aaysi2826

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

近期做移动端项目发现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 = '
图片名称：
' + this.fileName + '
'
           + '
原始大小：
' + (this.fileSize / 1024).toFixed(2) + 'KB<\/div><\/div>'
           + '
编码大小：
' + (base64.length / 1024).toFixed(2) + 'KB<\/div><\/div>'
           + '
原始尺寸：
' + this.tw + 'px * ' + this.th + 'px<\/div><\/div>'
           + '
编码尺寸：
' + this.sw + 'px * ' + this.sh + 'px<\/div><\/div>'
           + '
图片预览：
' + base64 + '"><\/div><\/div>'
           + '
Base64编码：