react做h5 例子_H5使用react组件实现拍照、选择图片上传

  • Post author:
  • Post category:其他


本篇文章给大家带来的内容是关于H5使用react组件实现拍照、选择图片上传,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。

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

重点

1.关于input

选择功能使用标签实现。属性accept=’image/*’,:capture表示,可以捕获到系统默认的设备,比如:camera–照相机;camcorder–摄像机;microphone–录音。如果设置了capture=”camera”,那么默认使用相机,存在部分机型无法调用相机的问题,我们这里不设置。允许多选multiple,加上onchange事件的回调函数。最终input大概长这个样子:

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。



版权声明:本文为weixin_36255718原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。