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

绝地灬酷狼 2022-03-30 14:18 314阅读 0赞

## 背景 ##

前段时间项目重构，改成SSR的项目，但之前用的图片选择上传组件不支持SSR（server-side-render）。遂进行了调研，发现很多的工具。但有的太大，有的使用麻烦，有的不满足使用需求。决定自己写一个h5移动端图片上传组件。图片上传是一个比较普遍的需求，PC端还好，移动端就不是特别好做了。下面将过程中一些重点的问题进行简单的记录。

## 重点 ##

### 1.关于input ###

--------------------

*  选择功能使用`<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`（小米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进行变换, [参考][Link 1]。最后通过`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。

来源：[https://segmentfault.com/a/1190000017564833][https_segmentfault.com_a_1190000017564833]

[Exif.js]: https://github.com/exif-js/exif-js
[stackoverflow]: https://stackoverflow.com/questions/7584794/accessing-jpeg-exif-rotation-data-in-javascript-on-the-client-side
[Link 1]: https://stackoverflow.com/questions/20600800/js-client-side-exif-orientation-rotate-and-mirror-jpeg-images
[https_segmentfault.com_a_1190000017564833]: https://segmentfault.com/a/1190000017564833