H5运用react组件实现照相、选中图片上传-
前段工夫项目重构,改成SSR的项目,但以前用的图片选中上传组件不支撑SSR(server-side-render)。遂进行了调研,发明许多的工具。但有的太大,有的运用费事,有的谴责脚运用需求。决议本人写一个h5挪移端图片上传组件。图片上传是一个比拼普遍的需求,PC端还好,挪移端就不是特殊好做了。下面将历程中一些重点的题目进行简略的记载。
重点
1.对于input
选中功能运用标签实现。属性accept='image/*',:capture表示,可以捕捉到系统默许的设施,比方:camera--拍照机;camcorder--摄像机;microphone--录音。要是设定了capture="camera",那么默许运用相机,存在局部机型没法调取相机的题目,我们这里不设定。允很多选multiple,加上onchange事件的回调函数。终究input大约长这个模样:
固然,这个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
(XIAOMI6等)此时通过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。
以上就是H5运用react组件实现照相、选中图片上传的细致内容,更多请关注 百分百源码网 其它相干文章!