H5使用react组件拍照并选择要上传的图片

本文带给大家的内容是有关使用React组件拍照并选择上载图片的H5. 具有一定的参考价值. 有需要的朋友可以参考它，希望对您有所帮助.

该项目在不久前进行了重组，并更改为SSR项目，但是之前使用的图像选择上传组件不支持SSR（服务器端渲染）. 因此，我进行了一项调查，发现了许多工具. 但是有些太大，有些使用起来很麻烦，有些不能满足使用需求. 决定编写一个h5移动图像上传组件. 图像上传是一个相对普遍的要求. PC端很好，但移动端不是特别好. 以下是该过程中一些关键问题的简要记录.

重要

1. 关于输入

使用标签实现选择功能. 属性accept ='image / *': capture表示可以捕获系统的默认设备，例如: camera--camera;相机-相机;麦克风-录音. 如果设置了capture =“ camera”，则默认使用相机. 存在某些型号无法调用相机的问题. 我们不会在这里设置它. 允许有多个选择，以及onchange事件的回调函数. 最终输入如下所示:

<input type=file
    className={classes.picker}
    accept=image/*
    multiple
    capture="camera"
    onChange={this.onfileChange} />

当然，此输入很丑陋，我们可以通过设置“ opacity: 0”来设置需要覆盖的选项按钮样式. 使其更具魅力.

选择图像后进行预览的功能是常见功能. 在这里h5调用拍照上传，除了样式之外，仅是代码实现. 在onchange的回调函数中，我们可以通过e.target.files获得所选文件，但是该文件无法显示在页面上. 通常的做法是将reader.readAsDataURL（文件）用于base64并将其显示在页面上. 上. 我在这里用九宫格展示，每张图片都是一块画布. 考虑到不同图像纵横比的问题，我首先通过reader.readAsDataURL（文件）获得了base64文件. 然后创建一个通过九个正方形网格的画布纵横比绘制的图像h5调用拍照上传，以使图片内容覆盖整个画布而不会变形.

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);
            };
        };
    }

在拍摄某些型号的照片时，通过onchange事件获得的文件是斑点（小米6等）. 目前，扩展名是由blob.type手动确定的.

当ios拍照后，发现文件已旋转时，本地文件确实是正常的. 此问题的原因在此不再详细说明. 有兴趣的人可以搜索. 因此，我们需要检测方向并将图像旋转回正常方向. 有许多可用于获取方向的库，例如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--未定义

正常图像方向应为1，因此我们将文件转换为画布，并使用画布的transform方法转换画布（参考）. 最后，使用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);
            };
        };
    });
}

最后

图片上传，这部分应该很容易. 以FormData的形式上传文件. 上面的代码只是某些功能的伪代码，并非所有功能的最终实现.

如果您可以折腾，那就折腾一下. 最后，您会发现您学到了很多东西，但是使用2333仍然很容易.

以上是H5使用react组件拍照和选择图像上传的详细内容. 有关更多信息，请关注php中文网络上的其他相关文章！

本文来自电脑杂谈，转载请注明本文网址：
https://www.pc-fly.com/a/ruanjian/article-207031-1.html