H5拍照、选择图片上传组件核心

背景

前段时间项目重构，改成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进行上传;

 ???//重置文件orientationresetOrientationToBlob (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。

来源：https://segmentfault.com/a/1190000017564833

H5拍照、选择图片上传组件核心

原文地址：https://www.cnblogs.com/lalalagq/p/10229186.html