背景
前段时间项目重构，改成 SSR 的项目，但之前用的图片选择上传组件不支持 SSR（server-side-render）。遂进行了调研，发现很多的工具。但有的太大，有的使用麻烦，有的不满足使用需求。决定自己写一个 h5 移动端图片上传组件。图片上传是一个比较普遍的需求，PC 端还好，移动端就不是特别好做了。下面将过程中一些重点的问题进行简单的记录。
重点
1. 关于 input
选择功能使用 <input> 标签实现。属性 accept=’image/*’，：capture 表示，可以捕获到系统默认的设备，比如：camera– 照相机；camcorder– 摄像机；microphone– 录音。如果设置了 capture=”camera”，那么默认使用相机，存在部分机型无法调用相机的问题，我们这里不设置。允许多选 multiple，加上 onchange 事件的回调函数。最终 input 大概长这个样子：
<input type=’file’
className={classes.picker}
accept=’image/*’
multiple
capture=”camera”
onChange={this.onfileChange} />
当然，这个 input 很丑，我们可以通过设置 `opacity:0`, 通过定位将我们需要的选择按钮样式覆盖上去。让它更加迷人一些。
2. 关于选择预览功能
选择图片后能预览是一个常见的功能，这里抛开样式，只说代码实现。在 onchange 的回调函数中，我们能通过 e.target.files 拿到所选择的文件，但是文件是无法展示在页面上的，通常的做法是使用 reader.readAsDataURL(file) 转为 base64 然后展示在页面上。我这边采用九宫格展示，每个图片是一个 canvas。考虑到不同图片宽高比的问题，我先通过 reader.readAsDataURL(file) 拿到 base64 文件。然后创建一个通过九宫格的 canvas 宽高比绘制图像，使图片内容在不失真的情况下铺满整个 canvas。
fileToCanvas (file, index) {// 文件
let reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = (event) => {
let image = new Image();
image.src = event.target.result;
image.onload = () => {
let imageCanvas = this[‘canvas’ + index].getContext(‘2d’);
let canvas = {width: imageCanvas.canvas.scrollWidth * 2, height: imageCanvas.canvas.scrollHeight * 2};
let ratio = image.width / image.height;
let canvasRatio = canvas.width / canvas.height;
let xStart = 0; let yStart = 0; let renderableWidth; let renderableHeight;
if (ratio > canvasRatio) {
// 横向过大，以高为准，缩放宽度
let hRatio = image.height / canvas.height;
renderableHeight = image.height;
renderableWidth = canvas.width * hRatio;
xStart = (image.width – renderableWidth) / 2;
}
if (ratio < canvasRatio) {
// 横向过小，以宽为准，缩放高度
let wRatio = image.width / canvas.width;
renderableWidth = image.width;
renderableHeight = canvas.height * wRatio;
yStart = (image.height – renderableHeight) / 2;
}
imageCanvas.drawImage(image, xStart, yStart, renderableWidth, renderableHeight, 0, 0, canvas.width * 2, canvas.height);
};
};
}
3. 文件上传的扩展名获取
部分机型拍照时文件通过 onchange 事件拿到的文件是 blob（小米 6 等）此时通过 blob.type 手动判断扩展名。
4.ios 拍照方向获取
当 ios 拍照上传后发现文件被旋转了，本地文件确是正常的，这个问题的原因这里不作详细解释。有兴趣的可以搜一下。所以我们需要检测 orientation，并将图像旋转回正常方向。获取 orientation 有现成的很多库如 Exif.js。但是这个库有些大，为了这个小需求引入似乎不太值得。stackoverflow 上有很多现成的获取图片方向的代码。稍微改了下：
getOrientation (file) {
return new Promise((resolve, reject) => {
let reader = new FileReader();
reader.onload = function (e) {
//e.target.result 为 base64 编码的文件
let view = new DataView(e.target.result);
if (view.getUint16(0, false) !== 0xffd8) {
return resolve(-2);
}
let length = view.byteLength;
let offset = 2;
while (offset < length) {
let marker = view.getUint16(offset, false);
offset += 2;
if (marker === 0xffe1) {
let tmp = view.getUint32(offset += 2, false);
if (tmp !== 0x45786966) {
return resolve(-1);
}
let little = view.getUint16(offset += 6, false) === 0x4949;
offset += view.getUint32(offset + 4, little);
let tags = view.getUint16(offset, little);
offset += 2;
for (let i = 0; i < tags; i++) {
if (view.getUint16(offset + i * 12, little) === 0x0112) {
return resolve(view.getUint16(offset + i * 12 + 8, little));
}
}
} else if ((marker & 0xff00) !== 0xff00) {
break;
} else {
offset += view.getUint16(offset, false);
}
}
return resolve(-1);
};
reader.readAsArrayBuffer(file.slice(0, 64 * 1024));
});
}
// 返回值：1– 正常，-2– 非 jpg，-1–undefined
5.ios 照片方向修正
正常的图像 orientation 应该是 1，于是我们将 file 转为 canvas，使用 canvas 的 transform 方法对 canvas 进行变换, 参考。最后通过 canvas.toDataURL(”) 拿到 base64 编码的方向正常的 base64 图片，再将 base64 转为 blob 进行上传;
// 重置文件 orientation
resetOrientationToBlob (file, orientation) {
return new Promise((resolve, reject) => {
let reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = (event) => {
let image = new Image();
image.src = event.target.result;
image.onload = () => {
let width = image.width;
let height = image.height;
let canvas = document.createElement(‘canvas’);
let ctx = canvas.getContext(‘2d’);
if (orientation > 4 && orientation < 9) {
canvas.width = height;
canvas.height = width;
} else {
canvas.width = width;
canvas.height = height;
}
switch (orientation) {
case 2:
ctx.transform(-1, 0, 0, 1, width, 0);
break;
case 3:
ctx.transform(-1, 0, 0, -1, width, height);
break;
case 4:
ctx.transform(1, 0, 0, -1, 0, height);
break;
case 5:
ctx.transform(0, 1, 1, 0, 0, 0);
break;
case 6:
ctx.transform(0, 1, -1, 0, height, 0);
break;
case 7:
ctx.transform(0, -1, -1, 0, height, width);
break;
case 8:
ctx.transform(0, -1, 1, 0, 0, width);
break;
default:
ctx.transform(1, 0, 0, 1, 0, 0);
}
ctx.drawImage(image, 0, 0, width, height);
let base64 = canvas.toDataURL(‘image/png’);
let blob = this.dataURLtoBlob(base64);
resolve(blob);
};
};
});
}
最后
图片上传，这部分应该比较 easy。通过 FormData 的形式将文件上传即可。以上代码仅是部分功能的伪代码，不是所有功能的最终实现。
能折腾就折腾一下，最后你会发现，学到了很多东西，但还是别人的轮子好用 2333。