摘要:決定自己寫一個移動端圖片上傳組件。允許多選,加上事件的回調函數。在的回調函數中,我們能通過拿到所選擇的文件,但是文件是無法展示在頁面上的,通常的做法是使用轉為然后展示在頁面上。
背景
前段時間項目重構,改成SSR的項目,但之前用的圖片選擇上傳組件不支持SSR(server-side-render)。遂進行了調研,發現很多的工具。但有的太大,有的使用麻煩,有的不滿足使用需求。決定自己寫一個h5移動端圖片上傳組件。圖片上傳是一個比較普遍的需求,PC端還好,移動端就不是特別好做了。下面將過程中一些重點的問題進行簡單的記錄。
重點 1.關于input
選擇功能使用標簽實現。屬性accept="image/*",:capture表示,可以捕獲到系統默認的設備,比如:camera--照相機;camcorder--攝像機;microphone--錄音。如果設置了capture="camera",那么默認使用相機,存在部分機型無法調用相機的問題,我們這里不設置。允許多選multiple,加上onchange事件的回調函數。最終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 < 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。
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/100541.html
摘要:拍照預覽壓縮上傳采坑記錄公司項目前段時間需要實現手機拍照上傳的功能,本來以為用和可以很輕松的實現,結果發現問題多多,特此記錄下來。完整代碼如下如果不支持壓縮,直接上傳原始圖片組裝二進制組裝參考文章 H5拍照、預覽、壓縮、上傳采坑記錄 公司項目前段時間需要實現手機拍照上傳的功能,本來以為用createObjectURL和canvas可以很輕松的實現,結果發現問題多多,特此記錄下來。 DE...
閱讀 1699·2021-11-02 14:47
閱讀 3647·2019-08-30 15:44
閱讀 1333·2019-08-29 16:42
閱讀 1731·2019-08-26 13:53
閱讀 934·2019-08-26 10:41
閱讀 3458·2019-08-23 17:10
閱讀 597·2019-08-23 14:24
閱讀 1716·2019-08-23 11:59