本篇文章给大家带来的内容是关于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();</