## 概述 在IOS中，canvas繪制圖片是有兩個限制的： 首先是圖片的大小，如果圖片的大小超過兩百萬像素，圖片也是無法繪制到canvas上的，調用drawImage的時候不會報錯，但是你用toDataURL獲取圖片數據的時候獲取到的是空的圖片數據。 再者就是canvas的大小有限制，如果canvas的大小大于大概五百萬像素（即寬高乘積）的時候，不僅圖片畫不出來，其他什么東西也都是畫不出來的。 應對上面兩種限制，我把圖片寬度、高度壓縮控制在1000px以內，這樣圖片最大就不超過兩百萬像素了。在前端開發中，**1000px * 1000px**基本可以滿足絕大部分的需求了。 ??除了上面所述的限制，還有兩個坑，一個就是canvas的toDataURL是只能壓縮jpg的，當用戶上傳的圖片是 png 的話，就需要轉成 jpg，也就是統一用**canvas.toDataURL('image/jpeg', 0.5)** ， 類型統一設成jpeg，而壓縮比就自己控制了。 另一個就是如果是png轉jpg，繪制到canvas上的時候，canvas存在透明區域的話，當轉成jpg的時候透明區域會變成黑色，因為canvas的透明像素默認為rgba(0,0,0,0)，所以轉成jpg就變成rgba(0,0,0,1)了，也就是透明背景會變成了黑色。解決辦法就是繪制之前在canvas上鋪一層白色的底色。 ~~~ ctx.fillStyle = "#fff"; ctx.fillRect(0, 0, width, height); ~~~ 在壓縮圖片之前，我們判斷圖片角度，如果圖片角度不正確，還需要用EXIF.js把圖片角度糾正過來。 壓縮完圖片，把base64的圖片數據轉成二進制數據存儲到暫存區中，等待被getBlobList獲取使用。 <br> ## Orientation 在手機上通過網頁 input 標簽拍照上傳圖片，有一些手機會出現圖片旋轉了90度d的問題，包括 iPhone 和個別三星手機。這些手機豎著拍的時候才會出現這種問題，橫拍出來的照片就正常顯示。因此，可以通過獲取手機拍照角度來對照片進行旋轉，從而解決這個問題。 這個參數并不是所有圖片都有的，不過手機拍出來的圖片是帶有這個參數的。 | 旋轉角度 | 參數值 | | --- | --- | | 0° | 1 | | 順時針90° | 6 | | 逆時針90° | 8 | | 180° | 3 | 參數為 1 的時候顯示正常，那么在這些橫拍顯示正常，即 Orientation = 1 的手機上，豎拍的參數為 6。 exif.js 獲取 Orientation ： ~~~ EXIF.getData(file, function() { var Orientation = EXIF.getTag(this, 'Orientation'); }); ~~~ <br> ## 限制寬高 ~~~ var Orientation = '', //圖片方向角 blobList = [], //壓縮后的二進制圖片數據列表 canvas = document.createElement("canvas"), //用于壓縮圖片（糾正圖片方向）的canvas ctx = canvas.getContext('2d'), file_type = 'image/jpeg', //圖片類型 qlty = 0.5, //圖片壓縮品質，默認是0.5，可選范圍是0-1的數字類型的值，可配置 imgWH = 1000; //壓縮后的圖片的最大寬度和高度，默認是1000px，可配置 ~~~ ~~~ //如果WH參數有值，則把WH賦值給imgWH（壓縮后的圖片的最大寬度和高度） if(WH&&WH<1000&&WH>0){ imgWH = WH; } ~~~ ~~~ // img的高度和寬度不能在img元素隱藏后獲取，否則會出錯 var height = img.height var width = img.width if(width > imgWH || height > imgWH) { var ratio = ~~(height / width * 10) / 10 if (width > height) { width = imgWH height = imgWH * ratio } else { height = imgWH width = height/ratio } img.width = width img.height = height } ~~~ <br> ## 設置白色背景 ~~~ // 設置為白色背景，jpg是不支持透明的，所以會被默認為canvas默認的黑色背景 that.ctx.fillStyle = '#fff' that.ctx.fillRect(0, 0, canvas.width, canvas.height); ~~~ <br> ## 旋轉 旋轉需要用到 canvas 的 rotate() 方法。 ~~~ ctx.rotate(angle); ~~~ rotate 方法的參數為旋轉弧度。需要將角度轉為弧度：degrees * Math.PI / 180 旋轉的中心點默認都在 canvas 的起點，即 ( 0, 0 )。旋轉的原理如下圖：  旋轉之后，如果從 ( 0, 0 ) 點進行 drawImage()，那么畫出來的位置就是在左圖中的旋轉 90 度后的位置，不在可視區域呢。旋轉之后，坐標軸也跟著旋轉了，想要顯示在可視區域呢，需要將 ( 0, 0 ) 點往 y 軸的反方向移 y 個單位，此時的起始點則為 ( 0, -y )。 同理，可以獲得旋轉 -90 度后的起始點為 ( -x, 0 )，旋轉 180 度后的起始點為 ( -x, -y )。 <br> ## 壓縮 HTMLCanvasElement.toDataURL() 方法返回一個包含圖片展示的 data URI 。可以使用 type 參數其類型，默認為 PNG 格式。圖片的分辨率為96dpi。 * 如果畫布的高度或寬度是0，那么會返回字符串“data:,”。 * 如果傳入的類型非“image/png”，但是返回的值以“data:image/png”開頭，那么該傳入的類型是不支持的。 * Chrome支持“image/webp”類型。 語法 ~~~ canvas.toDataURL(type, encoderOptions) ~~~ type：可選，圖片格式，默認為 image/png。 encoderOptions：可選，在指定圖片格式為 image/jpeg 或 image/webp的情況下，可以從 0 到 1 的區間內選擇圖片的質量。如果超出取值范圍，將會使用默認值 0.92。其他參數會被忽略。 這里我們使用 ~~~ canvas.toDataURL("image/jpeg", 0.5); ~~~ <br> ## 完整邏輯 ~~~ Lrz.prototype._createBase64 = () { var that = this, resize = that.resize, img = that.img, canvas = that.canvas, ctx = that.ctx, defaults = that.defaults, orientation = that.orientation; // 調整為正確方向 switch (orientation) { case 3: ctx.rotate(180 * Math.PI / 180); ctx.drawImage(img, -resize.width, -resize.height, resize.width, resize.height); break; case 6: ctx.rotate(90 * Math.PI / 180); ctx.drawImage(img, 0, -resize.width, resize.height, resize.width); break; case 8: ctx.rotate(270 * Math.PI / 180); ctx.drawImage(img, -resize.height, 0, resize.height, resize.width); break; case 2: ctx.translate(resize.width, 0); ctx.scale(-1, 1); ctx.drawImage(img, 0, 0, resize.width, resize.height); break; case 4: ctx.translate(resize.width, 0); ctx.scale(-1, 1); ctx.rotate(180 * Math.PI / 180); ctx.drawImage(img, -resize.width, -resize.height, resize.width, resize.height); break; case 5: ctx.translate(resize.width, 0); ctx.scale(-1, 1); ctx.rotate(90 * Math.PI / 180); ctx.drawImage(img, 0, -resize.width, resize.height, resize.width); break; case 7: ctx.translate(resize.width, 0); ctx.scale(-1, 1); ctx.rotate(270 * Math.PI / 180); ctx.drawImage(img, -resize.height, 0, resize.height, resize.width); break; default: ctx.drawImage(img, 0, 0, resize.width, resize.height); } return new Promise(function (resolve) { if (UA.oldAndroid || UA.mQQBrowser || !navigator.userAgent) { require(['jpeg_encoder_basic'], function (JPEGEncoder) { var encoder = new JPEGEncoder(), img = ctx.getImageData(0, 0, canvas.width, canvas.height); resolve(encoder.encode(img, defaults.quality * 100)); }) } else { resolve(canvas.toDataURL('image/jpeg', defaults.quality)); } }); }; ~~~ <br> ## 判斷選擇方向 <br> ## base64轉Blob ~~~ /** * dataURL to blob, ref to https://gist.github.com/fupslot/5015897 * @param dataURI,圖片的base64格式數據 * @returns {Blob} */ function dataURItoBlob(dataURI) { var byteString = atob(dataURI.split(',')[1]); var mimeString = dataURI.split(',')[0].split(':')[1].split(';')[0]; var ab = new ArrayBuffer(byteString.length); var ia = new Uint8Array(ab); for (var i = 0; i < byteString.length; i++) { ia[i] = byteString.charCodeAt(i); } return new Blob([ab], {type: mimeString}); } ~~~ <br> ## Exif.js Exif.js 提供了 JavaScript 讀取圖像的原始數據的功能擴展，例如：拍照方向、相機設備型號、拍攝時間、ISO 感光度、GPS 地理位置等數據。 <br> ## 參考資料 [localResizeIMG](https://github.com/think2011/localResizeIMG) [手把手教你如何編寫一個前端圖片壓縮、方向糾正、預覽、上傳插件 - 掘金](https://juejin.im/post/5a9759a16fb9a0635b5360b3) [移動端圖片上傳旋轉、壓縮的解決方案](https://zhuanlan.zhihu.com/p/27627436)