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/*'multiplecapture="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。
来源:https://segmentfault.com/a/1190000017564833
H5拍照、选择图片上传组件核心相关推荐
- h5 php 拍照上传图片,H5拍照、选择图片上传组件核心
背景 前段时间项目重构,改成SSR的项目,但之前用的图片选择上传组件不支持SSR(server-side-render).遂进行了调研,发现很多的工具.但有的太大,有的使用麻烦,有的不满足使用需求.决 ...
- MUI 拍照和从系统相册选择图片上传
要完成用MUI 拍照和从系统相册选择图片上传的功能,可以理解成有三个功能 1 调用手机相机的功能(可以查看官方API http://www.html5plus.org/doc/zh_cn/camer ...
- 【微信小程序】图片上传组件“mp-uploader“(weui)
使用示例 wxml <mp-uploader files="{{files}}" max-count="{{maximgs}}" max-size=& ...
- 解决H5 IOS手机图片上传时图片会旋转90°问题
解决H5 IOS手机图片上传时图片会旋转90°问题 Vant 官方给出的解答需要自己解决,没有处理. 解决办法主要使用了 compressorjs 插件库 一.Vant UI库Uploader 组件图 ...
- 如何上传图片到fileupload空间_如何用原生js写图片上传组件v2.0(还有新版本)?...
js图片上传组件: 基本要求: 1.上传的图片可预览,可删除,可被覆盖更新 2.要求图片格式为jpg和png,大小不能超过2M 新加需求: 1.模拟回显,可用本地存储(实际上的回显是通过后台传过来的u ...
- iOS学习:调用相机,选择图片上传,带预览功能
iOS学习:调用相机,选择图片上传,带预览功能 发表于2年前(2013-05-30 21:38) 阅读( 18194) | 评论( 16) 27人收藏此文章,我要收藏 赞3 8月22日珠海 OSC ...
- uniapp 调用手机相机拍照实现图片上传
uniapp 调用手机相机拍照实现图片上传 参考资料:https://blog.csdn.net/weixin_46391646/article/details/108450898 调用相机相册 un ...
- antd的联级选择器异步调用编辑回显_react-uplod-img 是一个基于 React antd组件的图片上传组件...
react-uplod-img 是一个基于 React antd组件的图片上传组件 支持oss qiniu等服务端自定义获取签名,批量上传, 预览, 删除, 图片精确的尺寸限制 排序等功能 需要 re ...
- 分享一个react 图片上传组件 支持OSS 七牛云
react-uplod-img 是一个基于 React antd组件的图片上传组件 支持oss qiniu等服务端自定义获取签名,批量上传, 预览, 删除, 排序等功能 需要 react 版本大于 v ...
最新文章
- linux下彻底杀死ngnix进程方法
- 【BZOJ】1076 [SCOI2008]奖励关 期望DP+状压DP
- 第四范式携手智源研究院 共推全球最大智能模型应用发展
- 【深度学习】preprint版本 | 何凯明大神新作MAE | CVPR2022最佳论文候选
- 小红书笔记_小红书的沙雕笔记,害人不浅啊
- KD Tree的原理及Python实现
- Linux多线程Pthread学习小结
- Android实现按两次back键退出应用
- Q81:“三角形网格”之“PLY文件”
- 怎么卸载php xshell,xftp5如何卸载?xshell5卸载不了怎么办?
- GraphPad Prism 9 for Mac 的使用教程
- vue对table的某一行的数据进行编辑,删除,查看详情操作
- 中文拼音排序(web前端实现)
- doc 问卷调查模板表_问卷调查表.doc
- 数据清洗与处理第二章
- Red Hat Enterprise Linux ISO 全镜像下载
- JS——运用JSONP技术完成百度关键字搜索
- 战略与领导力,Sony为何总是顾此失彼?
- 3.深入浅出:结型场效应管原理应用——参考《模拟电子技术基础》清华大学华成英主讲
- 东南融通无领导小组面试记