背景

前段時間項目重構，改成SSR的項目，但之前用的圖片選擇上傳組件不支持SSR（server-side-render）。遂進行了調(diào)研，發(fā)現(xiàn)很多的工具。但有的太大，有的使用麻煩，有的不滿足使用需求。決定自己寫一個h5移動端圖片上傳組件。圖片上傳是一個比較普遍的需求，PC端還好，移動端就不是特別好做了。下面將過程中一些重點的問題進行簡單的記錄。

重點

1.關于input

---

• 選擇功能使用<input>標簽實現(xiàn)。屬性accept='image/*'，：capture表示，可以捕獲到系統(tǒng)默認的設備，比如：camera--照相機；camcorder--攝像機；microphone--錄音。如果設置了capture="camera"，那么默認使用相機，存在部分機型無法調(diào)用相機的問題，我們這里不設置。允許多選multiple，加上onchange事件的回調(diào)函數(shù)。最終input大概長這個樣子：

&lt;input type='file'className={classes.picker}accept='image/*'multiplecapture="camera"onChange={this.onfileChange} /&gt; 當然，這個input很丑，我們可以通過設置`opacity:0`,通過定位將我們需要的選擇按鈕樣式覆蓋上去。讓它更加迷人一些。

2.關于選擇預覽功能

---

• 選擇圖片后能預覽是一個常見的功能，這里拋開樣式，只說代碼實現(xiàn)。在onchange的回調(diào)函數(shù)中，我們能通過e.target.files拿到所選擇的文件，但是文件是無法展示在頁面上的，通常的做法是使用reader.readAsDataURL(file)轉為base64然后展示在頁面上。我這邊采用九宮格展示，每個圖片是一個canvas。考慮到不同圖片寬高比的問題，我先通過reader.readAsDataURL(file)拿到base64文件。然后創(chuàng)建一個通過九宮格的canvas寬高比繪制圖像，使圖片內(nèi)容在不失真的情況下鋪滿整個canvas。

fileToCanvas (file, index) {//文件let reader = new FileReader();reader.readAsDataURL(file);reader.onload = (event) =&gt; {let image = new Image();image.src = event.target.result;image.onload = () =&gt; {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 &gt; canvasRatio) { // 橫向過大，以高為準，縮放寬度let hRatio = image.height / canvas.height;renderableHeight = image.height;renderableWidth = canvas.width * hRatio;xStart = (image.width - renderableWidth) / 2;}if (ratio &lt; 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拍照上傳后發(fā)現(xiàn)文件被旋轉了，本地文件確是正常的，這個問題的原因這里不作詳細解釋。有興趣的可以搜一下。所以我們需要檢測orientation，并將圖像旋轉回正常方向。獲取orientation有現(xiàn)成的很多庫如Exif.js。但是這個庫有些大，為了這個小需求引入似乎不太值得。stackoverflow上有很多現(xiàn)成的獲取圖片方向的代碼。
  稍微改了下：

getOrientation (file) {return new Promise((resolve, reject) =&gt; {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 &lt; 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 &lt; tags; i++) {if (view.getUint16(offset + i * 12, little) === 0x0112) {return resolve(view.getUint16(offset + i * 12 + 8, little));}}} else if ((marker &amp; 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) =&gt; {let reader = new FileReader();reader.readAsDataURL(file);reader.onload = (event) =&gt; {let image = new Image();image.src = event.target.result;image.onload = () =&gt; {let width = image.width;let height = image.height;let canvas = document.createElement('canvas');let ctx = canvas.getContext('2d');if (orientation &gt; 4 &amp;&amp; orientation &lt; 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的形式將文件上傳即可。以上代碼僅是部分功能的偽代碼，不是所有功能的最終實現(xiàn)。
• 能折騰就折騰一下，最后你會發(fā)現(xiàn)，學到了很多東西，但還是別人的輪子好用2333。

來源：https://segmentfault.com/a/1190000017564833

總結

以上是生活随笔為你收集整理的H5拍照、选择图片上传组件核心的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。