摘要:拍照預覽壓縮上傳采坑記錄公司項目前段時間需要實現手機拍照上傳的功能,本來以為用和可以很輕松的實現,結果發現問題多多,特此記錄下來。完整代碼如下如果不支持壓縮,直接上傳原始圖片組裝二進制組裝參考文章
H5拍照、預覽、壓縮、上傳采坑記錄
公司項目前段時間需要實現手機拍照上傳的功能,本來以為用createObjectURL和canvas可以很輕松的實現,結果發現問題多多,特此記錄下來。
DEMO預覽(需用新標簽頁打開)
圖片預覽在IOS上,豎著拍照片時,圖片預覽會旋轉90°,橫著拍照就沒問題,我實驗了一下,在IOS上,只有當圖片的分辨率過大會出現這種情況。
最后實現圖片預覽效果借助了exif-js和megapix-image,exif-js負責讀取圖片的EXIF信息,獲取orientation信息,然后用megapix-image把圖片數據渲染在img標簽上,代碼如下:
import EXIF from "../utils/exif"; import MegaPixImage from "../utils/megapix-image"; /** * * @param file file對象 * @param resImg 預覽IMG標簽 * @returns {Promise} */ renderPreviewImg(file, resImg) { return new Promise(function (resolve, reject) { EXIF.getData(file, _=> { var allMetaData = EXIF.getAllTags(file); var orientation = allMetaData.Orientation; var mpImg = new MegaPixImage(file); mpImg.render(resImg, { maxWidth: 1024, maxHeight: 1024, // quality: 0.6, orientation: orientation }, resolve); }); }); }無刷新壓縮上傳
思路有兩種:
用canvas的toDataURL()API,直接將base64文本傳遞過去
自己構造File對象,ajax上傳
第一種方法需要服務器端做工作,而且上傳數據量會增大4/3,因此此方法只作為回退方案。
第二種方法的原理是用Uint8Array來構造Blob,再使用formData上傳。
這里要注意的是:ArrayBuffer不能被直接操作,必須通過typed array來存取,而且Blob的構造函數也是typed array。
完整代碼如下:
this.renderPreviewImg(file, resImg) .then(() => { try { var binaryData = null; if (!Blob || !ArrayBuffer || !Uint8Array) { // alert(123); binaryData = file;//如果不支持壓縮,直接上傳原始圖片 } else { //組裝二進制 var base64Data = $(resImg).attr("src"); var byteString = atob(base64Data.split(",")[1]); var ab = new ArrayBuffer(byteString.length); var ia = new Uint8Array(ab); for (var i = 0; i < byteString.length; i++) { ia[i] = byteString.charCodeAt(i); } binaryData = new Blob([ia], { "type": file.type }); } this.setState({ uploadProgress: 0 }); //組裝formData var fd = new FormData(); fd.append("file", binaryData, "img.jpg"); fd.append("token", uploadToken); console.log(fd); return this.uploadBinaryDataToQiniu(fd, this.uploadSuccess.bind(this), this.handleUploadProgress.bind(this)) } catch (e) { alert(e.message); } }).catch(function (e) { console.log(e); })參考文章
http://tgideas.qq.com/webplat...
http://blog.csdn.net/hsany330...
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/81382.html
摘要:決定自己寫一個移動端圖片上傳組件。允許多選,加上事件的回調函數。在的回調函數中,我們能通過拿到所選擇的文件,但是文件是無法展示在頁面上的,通常的做法是使用轉為然后展示在頁面上。 背景 前段時間項目重構,改成SSR的項目,但之前用的圖片選擇上傳組件不支持SSR(server-side-render)。遂進行了調研,發現很多的工具。但有的太大,有的使用麻煩,有的不滿足使用需求。決定自己寫一...
摘要:關于移動端拍照上傳圖片的解決方案場景產品要求用戶拍一張身份證和一張人像,然后后臺調用商用接口比對證件和人像的匹配度。缺點手機拍照圖片過大,壓縮后,圖片依然大,沒上傳一次花費時間過長,最后再調用接口比對時間花費也長。 關于移動端拍照上傳圖片的解決方案 場景 產品要求用戶拍一張身份證和一張人像,然后后臺php調用商用接口比對證件和人像的匹配度。showImg(https://segment...
閱讀 3448·2023-04-26 00:39
閱讀 4039·2021-09-22 10:02
閱讀 2532·2021-08-09 13:46
閱讀 1098·2019-08-29 18:40
閱讀 1444·2019-08-29 18:33
閱讀 773·2019-08-29 17:14
閱讀 1513·2019-08-29 12:40
閱讀 2970·2019-08-28 18:07