這篇文章帶給大家的內容是關於H5使用react元件實現拍照、選擇圖片上傳，有一定的參考價值，有需要的朋友可以參考一下，希望對你有所幫助。
前段時間項目重構，改成SSR的項目，但之前用的圖片選擇上傳元件不支援SSR（server-side-render）。遂進行了調研，發現很多的工具。但有的太大，有的使用麻煩，有的不滿足使用需求。決定自己寫一個h5行動端圖片上傳組件。圖片上傳是比較普遍的需求，PC端還好，行動端就不是特別好做了。以下將過程中一些重點的問題進行簡單的記錄。
重點
1.關於input
選擇功能使用標籤實作。屬性accept='image/*'，：capture表示，可以捕捉到系統預設的設備，例如：camera--照相機；camcorder--攝影機；microphone--錄音。如果設定了capture="camera"，那麼預設使用相機，存在部分機型無法呼叫相機的問題，我們這裡不設定。允許多選multiple，加上onchange事件的回呼函數。最後input大概長這個樣子：
<input type='file'
className={classes.picker}
accept='image/*'
multiple
capture="camera"
onChange={this.onfileChange} />當然，這個input很醜，我們可以透過設定`opacity:0`,透過定位將我們需要的選擇按鈕樣式覆蓋上去。讓它更加迷人一些。
選擇圖片後能預覽是一個常見的功能，這裡拋開樣式，只說程式碼實作。在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);
};
};
}部分機型拍照時檔案透過onchange事件拿到的檔案是blob（小米6等）此時透過blob.type手動判斷副檔名。
當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
正常的圖像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。
以上是H5使用react元件實現拍照、選擇圖片上傳的詳細內容。更多資訊請關注PHP中文網其他相關文章！
