【预置条件】3g/2g网络
【测试步骤】上传身份证2M左右的图片
【预期结果】正常上传
【测试结果】卡死状态
【重现概率】100%
【备注信息】仅ios
【解决方案】由前端在发送请求上传图片之前,对原图进行压缩,压缩控制在1M以内,然后再请求后台。
/***
* 前端图片压缩
* 参数传入图片文件对象,成功情况回调函数,失败情况回调函数
* 成功回调函数传入压缩后的图片文件对象
* 失败回调函数传入被catch的error对象
***/
// 压缩图片
var resizeImage = function(url,successHandle,errorHandle) {
try {
reader.onload = function(readerEvent) {
var image = new Image();
image.onload = function(imageEvent) {
// Resize the image
var canvas = document.createElement('canvas'),
max_size = 800, // 压缩后图片的最大宽度
width = image.width,
height = image.height;
if (width > height) {
if (width > max_size) {
height *= max_size / width;
width = max_size;
}
} else {
if (height > max_size) {
width *= max_size / height;
height = max_size;
}
}
canvas.width = width;
canvas.height = height;
canvas.getContext('2d').drawImage(image, 0, 0, width, height);//重绘图片
var dataUrl = canvas.toDataURL('image/jpeg');
var resizedImage = dataURLToBlob(dataUrl);// 将base64转化为blob对象
successHandle(resizedImage);//成功后的回调函数
}
image.src = url;
} catch(e) {
// statements
if (errorHandle){
errorHandle(e);
}
}
}
// 将base64转化为blob对象
var dataURLToBlob = function(dataURL) {
var BASE64_MARKER = ';base64,';
if (dataURL.indexOf(BASE64_MARKER) == -1) {
var parts = dataURL.split(',');
var contentType = parts[0].split(':')[1];
var raw = parts[1];
return new Blob([raw], { type: contentType });
}
var parts = dataURL.split(BASE64_MARKER);
var contentType = parts[0].split(':')[1];
var raw = window.atob(parts[1]);
var rawLength = raw.length;
var uInt8Array = new Uint8Array(rawLength);
for (var i = 0; i < rawLength; ++i) {
uInt8Array[i] = raw.charCodeAt(i);
}
return new Blob([uInt8Array], { type: contentType });
}