本篇文章给大家带来的内容是关于h5使用react组件实现拍照、选择图片上传，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。
前段时间项目重构，改成SSR的项目，但之前用的图片选择上传组件不支持SSR（server-side-render）。遂进行了调研，发现很多的工具。但有的太大，有的使用麻烦，有的不满足使用需求。决定自己写一个h5移动端图片上传组件。图片上传是一个比较普遍的需求，PC端还好，移动端就不是特别好做了。下面将过程中一些重点的问题进行简单的记录。
重点
1.关于input
选择功能使用标签实现。属性accept='image/*'，：capture表示，可以捕获到系统默认的设备，比如：camera--照相机；camcorder--摄像机；microphone--录音。如果设置了capture="camera"，那么默认使用相机，存在部分机型无法调用相机的问题，我们这里不设置。允许多选multiple，加上onchange事件的回调函数。最终input大概长这个样子：
<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 <h3>3.文件上传的扩展名获取</h3><p>部分机型拍照时文件通过onchange事件拿到的文件是<code>blob</code>（小米6等）此时通过<code>blob.type</code>手动判断扩展名。</p><div class="aritcle_card flexRow artxards">
<div class="artcardd flexRow">
<a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill5980" title="javascript-pro"><img
src="https://img.php.cn/upload/skill/000/000/081/179074807567238.jpg" alt="javascript-pro" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
<div class="aritcle_card_info flexColumn">
<a rel="nofollow" href="/xiazai/skill5980" title="javascript-pro" class="overflowclass">javascript-pro</a>
<p class="overflowclass">专注现代 ECMAScript、异步编程、性能优化和全栈的 JavaScript 专家，适用于现代开发</p>
</div>
<a rel="nofollow" href="/xiazai/skill5980" title="javascript-pro" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span>
</a>
</div>
</div><h3>4.ios拍照方向获取</h3><p>当ios拍照上传后发现文件被旋转了，本地文件确是正常的，这个问题的原因这里不作详细解释。有兴趣的可以搜一下。所以我们需要检测orientation，并将图像旋转回正常方向。获取orientation有现成的很多库如Exif.js。但是这个库有些大，为了这个小需求引入似乎不太值得。stackoverflow上有很多现成的获取图片方向的代码。<br> 稍微改了下：</p><pre class="brush:php;toolbar:false;">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 <p>//返回值：1--正常，-2--非jpg，-1--undefined</p><h3>5.ios照片方向修正</h3><p>正常的图像orientation应该是1，于是我们将file转为canvas，使用canvas的transform方法对canvas进行变换, 参考。最后通过canvas.toDataURL('')拿到base64编码的方向正常的base64图片，再将base64转为blob进行上传;</p><pre class="brush:php;toolbar:false;"> //重置文件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 <p><strong>最后</strong></p><p>图片上传，这部分应该比较easy。通过FormData的形式将文件上传即可。以上代码仅是部分功能的伪代码，不是所有功能的最终实现。</p><p>能折腾就折腾一下，最后你会发现，学到了很多东西，但还是别人的轮子好用2333。</p><p class="comments-box-content"><br></p>
