最近在一个项目中需要实现一个移动端上传图片文件的需求,主要需求的是压缩并且按照比例自动裁切图片然后上传。
一听是蛮简单的,因为是在移动端使用,所以完全可以使用 HTML5 的新特性以及一些 API。
主要的思路是这样:
input (type='file')
的 change
事件,然后拿到文件的 file
; file
转成 dataURL
; canvas
绘制图片,绘制的时候经过算法按比例裁剪; canvas
转成 dataURL
; dataURL
转成 blob
; blob
append
到 FormData
的实例对象。 主要用到的 FileReader
、 canvas
、 FormData
、 Blob
这几个 API。
开发过程遇到了蛮多坑,特别是在android下的微信浏览器内。
// html 片段
<input type="file" id="file-input" name="image" accept="image/gif, image/jpeg, image/png">
对于 type
为 file
的 input
我们可以设置 accept
属性来现在我们要上传的文件类型,这里的目的是上传图片文件,所以我们可以设置: accept="image/gif, image/jpeg, image/png"
。
// JavaScript
document.getElementById('file-input').onchange= function (event) {
// 通过 event.target 回去 input 元素对象,然后拿到 files list,取第一个 file
let file = event.target.files[0];
// compressImage 在下面解释,它接受三个参数,文件、裁剪的长宽比例,回调函数(回调函数获得一个 FormData 对象,文件已经存在里面了);
compressImage(file, [1, 1], (targetFormData) => {
//...... 这里获取到了 targetFormData,就可以直接使用它上传了
});
};
这里用到的是 FileReader
这个 API。
/**
* file 转成 dataURL
* @param file 文件
* @param callback 回调函数
*/
function fileToDataURL (file, callback) {
const reader = new window.FileReader();
reader.onload = function (e) {
callback(e.target.result);
};
reader.readAsDataURL(file);
}
一开始是这样的
Image
对象,然后把 src
设置成 dataURL
,获取到这张图片; canvas
元素,用来处理绘制图片; ctx.drawImage
绘制图片; canvas.toDataURL
把 canvans
转成 dataURL
。 /**
* 使用 canvas 压缩处理 dataURL
* @param dataURL
* @param ratio 比例
* @param callback
*/
function compressDataURL (dataURL, ratio, callback) {
// 1
const img = new window.Image();
img.src = dataURL;
// 2
const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');
// 3
canvas.width = 100 * ratio[0];
canvas.height = 100 * ratio[2];
const RATIO = canvas.width / canvas.height;
let cutx = 0;
let cuty = 0;
let cutw = img.width;
let cuth = img.height;
if (cutw / cuth > RATIO) {
// 宽超过比例了]]
let realw = cuth * RATIO;
cutx = (cutw - realw) / 2;
cutw = realw;
} else if (cutw / cuth < RATIO) {
// 长超过比例了]]
let realh = cutw / RATIO;
cuty = (cuth - realh) / 2;
cuth = realh;
}
// 4
ctx.drawImage(img, cutx, cuty, cutw, cuth, 0, 0, canvas.width, canvas.height);
const ndata = canvas.toDataURL('image/jpeg', 1);
callback(ndata);
}
一切的运行在pc端的chrome浏览器下模拟都很好,但是在移动端测试的时候发现 canvas
无法绘制出图片,发现是 img
设置 src
有延迟,导致还没获取到图片图像就开始绘制。
改进:监听 img.onload
事件来处理之后的操作:
/**
* 使用 canvas 压缩 dataURL
* @param dataURL
* @param ratio
* @param callback
*/
function compressDataURL (dataURL, ratio, callback) {
const img = new window.Image();
img.src = dataURL;
// onload
img.onload = function () {
const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');
canvas.width = 100 * ratio.width;
canvas.height = 100 * ratio.height;
const RATIO = canvas.width / canvas.height;
let cutx = 0;
let cuty = 0;
let cutw = img.width;
let cuth = img.height;
if (cutw / cuth > RATIO) {
// 宽超过比例了]]
let realw = cuth * RATIO;
cutx = (cutw - realw) / 2;
cutw = realw;
} else if (cutw / cuth < RATIO) {
// 长超过比例了]]
let realh = cutw / RATIO;
cuty = (cuth - realh) / 2;
cuth = realh;
}
ctx.drawImage(img, cutx, cuty, cutw, cuth, 0, 0, canvas.width, canvas.height);
const ndata = canvas.toDataURL('image/jpeg', 1);
callback(ndata);
};
}
这一步我们把 dataURL
转成 Blob
/**
* dataURL 转成 blob
* @param dataURL
* @return blob
*/
function dataURLtoBlob (dataURL) {
let binaryString = atob(dataURL.split(',')[1]);
let arrayBuffer = new ArrayBuffer(binaryString.length);
let intArray = new Uint8Array(arrayBuffer);
let mime = dataURL.split(',')[0].match(/:(.*?);/)[1]
for (let i = 0, j = binaryString.length; i < j; i++) {
intArray[i] = binaryString.charCodeAt(i);
}
let data = [intArray];
let result = new Blob(data, { type: mime });
return result;
}
很完美了吗,在pc端模拟成功,在移动端chrome浏览器测试成功,但是在微信浏览器中失败,经过 try...catch
发现是在 new Blob
的时候失败。
查看之后发现是这个 API 对 Android 的支持还不明。
解决方法是利用 BlobBuilder
这个老 API 来解决: https://developer.mozilla.org/en-US/docs/Web/API/BlobBuilder
因为这个 API 已经被遗弃,不同机型和安卓版本兼容性不一致,所以需要一个判断。
解决方法:
/**
* dataURL 转成 blob
* @param dataURL
* @return blob
*/
function dataURLtoBlob (dataURL) {
let binaryString = atob(dataURL.split(',')[1]);
let arrayBuffer = new ArrayBuffer(binaryString.length);
let intArray = new Uint8Array(arrayBuffer);
let mime = dataURL.split(',')[0].match(/:(.*?);/)[1]
for (let i = 0, j = binaryString.length; i < j; i++) {
intArray[i] = binaryString.charCodeAt(i);
}
let data = [intArray];
let result;
try {
result = new Blob(data, { type: mime });
} catch (error) {
window.BlobBuilder = window.BlobBuilder ||
window.WebKitBlobBuilder ||
window.MozBlobBuilder ||
window.MSBlobBuilder;
if (error.name === 'TypeError' && window.BlobBuilder){
var builder = new BlobBuilder();
builder.append(arrayBuffer);
result = builder.getBlob(type);
} else {
throw new Error('没救了');
}
}
return result;
}
这一步使用到我们之前的东西。
/**
* 压缩图片
* @param file 图片文件
* @param ratio 比例
* @param callback 回调,得到一个 包含文件的 FormData 实例
*/
function compressImage (file, ratio, callback) {
fileToDataURL(file, (dataURL) => {
compressDataURL(dataURL, ratio, (newDataURL) => {
const newBlob = dataURLtoBlob(newDataURL);
const oData = new FormData();
oData.append('file', blob);
callback(oData);
});
});
}
// JavaScript
document.getElementById('file-input').onchange= function (event) {
// 通过 event.target 回去 input 元素对象,然后拿到 files list,取第一个 file
let file = event.target.files[0];
// 接受三个参数,文件、裁剪的长宽比例,回调函数(回调函数获得一个 FormData 对象,文件已经存在里面了);
compressImage(file, [1, 1], (targetFormData) => {
let xhr = new XMLHttpRequest();
// 进度监听
// xhr.upload.addEventListener('progress', progFoo, false);
// 加载监听
// xhr.addEventListener('load', loadFoo, false);
// 错误监听
// xhr.addEventListener('error', errorFoo, false);
xhr.onreadystatechange = function () {
if (xhr.readyState === 4) {
if (xhr.status === 200) {
// 上传成功,获取到结果 results
let results = JSON.parse(xhr.responseText);
// ......
}
} else {
// 上传失败
}
}
};
xhr.open('POST', '/api/upload', true);
xhr.send(targetFormData);
});
};
一切似乎都很完美,pc 端模拟测试通过,但是到移动端却发现上传了一个空文件,这不科学!!!查文档后发现这么一句话:
Note: XHR in Android 4.0 sends empty content for FormData with blob.
简直蒙蔽。
在 上找到了解决方案: http://stackoverflow.com/questions/15639070/empty-files-uploaded-in-android-native-browser/28809955#28809955
通过自己包装 FormDataShim
和重写 XMLHttpRequest.prototype.send
函数:
// Android上的AppleWebKit 534以前的内核存在一个Bug,
// 导致FormData加入一个Blob对象后,上传的文件是0字节
// QQ X5浏览器也有这个BUG
var needsFormDataShim = (function () {
var bCheck = ~navigator.userAgent.indexOf('Android') &&
~navigator.vendor.indexOf('Google') &&
!~navigator.userAgent.indexOf('Chrome');
return bCheck && navigator.userAgent.match(/AppleWebKit//(/d+)/).pop() <= 534 || /MQQBrowser/g.test(navigator.userAgent);
})();
// 重写 Blob 构造函数,在 XMLHttpRequest.prototype.send 中会使用到
var BlobConstructor = ((function () {
try {
new Blob();
return true;
} catch (e) {
return false;
}
})()) ? window.Blob : function (parts, opts) {
let bb = new (
window.BlobBuilder ||
window.WebKitBlobBuilder ||
window.MSBlobBuilder ||
window.MozBlobBuilder
);
parts.forEach(function (p) {
bb.append(p);
});
return bb.getBlob(opts ? opts.type : undefined);
};
// 手动包装 FormData 同时重写 XMLHttpRequest.prototype.send
var FormDataShim = (function () {
var formDataShimNums = 0;
return function FormDataShim () {
var o = this;
// Data to be sent
let parts = [];
// Boundary parameter for separating the multipart values
let boundary = Array(21).join('-') + (+new Date() * (1e16 * Math.random())).toString(36);
// Store the current XHR send method so we can safely override it
let oldSend = XMLHttpRequest.prototype.send;
this.getParts = function () {
return parts.toString();
};
this.append = function (name, value, filename) {
parts.push('--' + boundary + '/r/nContent-Disposition: form-data; name="' + name + '"');
if (value instanceof Blob) {
parts.push('; filename="' + (filename || 'blob') + '"/r/nContent-Type: ' + value.type + '/r/n/r/n');
parts.push(value);
} else {
parts.push('/r/n/r/n' + value);
}
parts.push('/r/n');
};
formDataShimNums++;
XMLHttpRequest.prototype.send = function (val) {
let fr;
let data;
let oXHR = this;
if (val === o) {
// Append the final boundary string
parts.push('--' + boundary + '--/r/n');
// Create the blob
data = new BlobConstructor(parts);
// Set up and read the blob into an array to be sent
fr = new FileReader();
fr.onload = function () {
oldSend.call(oXHR, fr.result);
};
fr.onerror = function (err) {
throw err;
};
fr.readAsArrayBuffer(data);
// Set the multipart content type and boudary
this.setRequestHeader('Content-Type', 'multipart/form-data; boundary=' + boundary);
formDataShimNums--;
if (formDataShimNums === 0) {
XMLHttpRequest.prototype.send = oldSend;
}
} else {
oldSend.call(this, val);
}
};
};
})();
重写 compressImage
/**
* 压缩图片
* @param file 图片文件
* @param ratio 比例
* @param callback 回调,得到一个 包含文件的 FormData 实例
*/
function compressImage (file, ratio, callback) {
fileToDataURL(file, (dataURL) => {
compressDataURL(dataURL, ratio, (newDataURL) => {
const newBlob = dataURLtoBlob(newDataURL);
// 判断是否需要我们之前的重写
let NFormData = needsFormDataShim() ? FormDataShim : window.FormData;
const oData = new NFormData();
oData.append('file', blob);
callback(oData);
});
});
}
到这一步总算成功。
参考:
http://stackoverflow.com/questions/15639070/empty-files-uploaded-in-android-native-browser/28809955#28809955
http://www.alloyteam.com/2015/04/ru-he-zai-yi-dong-web-shang-shang-chuan-wen-jian/