背景
前段时间项目重构，改成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。
