使用 canvas 繪製圖片，而後下載、上傳

最近作了個需求，設計提供幾張切圖。前端把切圖還有後臺返回的文本信息，拼接到一塊繪製爲一張圖片。而後會下載、或者上傳。 作起來其實仍是挺簡單的。下面說下大概的流程。

前端繪圖只能使用 canvas。

一、主要用到的canvas API 有如下幾個：

let cvs = document.createElement('canvas');
    let ctx = cvs.getContext('2d');
    // 設置填充顏色，也能夠設置字體顏色
    ctx.fillStyle = bgcColor; 
    // 設置文本信息。字體、大小、font-weight等。
    ctx.font = 'bold 20px 宋體'; 
    // 設置文本對齊方式
    ctx.textAlign = 'center'; // left || right || center || start || end; 總共五個值，經常使用left、center;
    // 設置文本基線對齊方式 相似於css的 vertical-align 
    ctx.textBaseLine = 'middle'; // top || hanging || middle || alphabetic || ideographic || bottom
    // 繪製文本 text: 文本內容。x: 文本的X座標。y: 文本的Y座標。maxWidth: 繪製文本的最大寬度。
    ctx.fillText(text, x, y, maxWidth);
    // 計算文本所佔的寬度 這個方法返回一個對象，有個 width 屬性。
    ctx.measureText(text)
    // 繪製矩形
    ctx.fillRect(0, 0, width, height);
    // 繪製圖片 img: 目標圖片。x: X座標。y: Y座標。width：繪製的寬度。height：繪製的高度。
    ctx.drawImg(img, x, y, width, height);
    // 繪製圓
    ctx.arc()
複製代碼

canvas的詳情參考 https://www.w3cplus.com/blog/tags/616.html

二、使用canvas 繪圖完畢後。提供導出下載

canvas 有兩個API。能夠把繪製的圖片轉爲可下載的文件。

canvas.toDataURL() 方法返回一個包含圖片展現的 dataURL。可使用 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 。其餘參數會忽略
複製代碼

返回值

返回一個 包含 dataURL 的 DOMString (也就是base64);
複製代碼

如何下載

// 下載方法。
  /** *@param imgSrc 文件連接能夠是一個dataURL 也能夠是一個 blob 對象。 *@param imgName 下載後的文件名字。 */
  function downloadImg (imgSrc, imgName) {
      let elem = document.createElement('a');
      elem.setAttribute('href', imgSrc);
      elem.setAttribute('download', imgName);
      document.body.appendChild(elem);
      elem.click();
      document.body.removeChild(elem);
  }
複製代碼

看了上面這些方法以後，這個需求就比較簡單了

let cvs = document.createElement('canvas');
  let ctx = cvs.getContext('2d');
  .....
  //圖片繪製完成
  let imgSrc = ctx.toDataURL('image/jpeg', 0.9);
  let imgName = '測試圖片.jpg';
  downloadImg(imgSrc, imgName); // 瀏覽器就會自動下載了
複製代碼

一開始，我用的就是上面這種方法下載，不過當繪製下載一個比較大的圖片時，瀏覽器就會提示下載失敗。查了資料，原來使用dataURL進行下載會有大小限制。後來再次查資料發現可使用 blob 進行下載。

關於blob的詳情請參考：https://developer.mozilla.org/zh-CN/docs/Web/API/Blob

瞭解一下，canvas 如何轉爲 blob

語法

canvas.toBlob(callback, type, encoderOption); 
複製代碼

參數

callback:  由於canvas 如何轉爲 blob是一個異步操做，因此須要一個回調函數，參數就是 blob對象。
type: 指定圖片格式。默認爲: 'image/png';
encoderOption: 在指定的格式爲 'image/jpeg'、'image/webp'的狀況下，能夠設置從0 - 1 的值來改變圖片的質量。
      若是超出取值範圍會設置爲 0.92 。其餘參數會忽略
複製代碼

這個方法沒有返回值。

好了，如今看下如何使用 blob 進行下載

let cvs = document.createElement('canvas');
 let ctx = cvs.getContext('2d'); 
 .....
 // 圖片繪製完成
 ctx.toBlob(function (blob) {
     let imgSrc = window.URL.createObjectURL(blob);
     let imgName = '測試圖片.jpg';
     downloadImg(imgSrc, imgName);
     window.URL.revokeObjectURL(imgSrc);
 }, 'image/jpeg', 0.9)
複製代碼

有兩個方法，以前沒有了解過，今天就記錄一下。\

URL.createObjectURL()
看到MDN上對這個方法的介紹，這是一個實驗中的功能，某些瀏覽器尚在開發中。該標準對應的文檔可能被從新修訂，因此在將來版本的瀏覽器中，該功能的語法和行爲也可能改變。（這些東西，之後再說，如今是管不了那麼多了。都怪產品^_^）。

URL.createObjectURL() 靜態方法會建立一個 DOMString ,其中包含一個表示參數中給出的對象的URL。這個URL的生命週期和建立它的窗口中的 document綁定。這個新的URL對象表示指定的File對象或Blob對象。
語法

objectURL = URL.createObjectURL(blob);  // window能夠省略
複製代碼

參數
用來建立URL的 File 或 Blob對象。
注意事項
在每次調用URL.createObjectURL(blob)方法時，都會建立一個新的URL對象，儘管已經用相同的參數建立過。因此，當再也不須要這個URL對象時，必須經過調用URL.revokeObjectURL()方法來釋放。瀏覽器會在文檔退出的時候，釋放它們，不過爲了得到最佳使用性能以及內存情況，你應該在安全的時機主動釋放它們。

URL.revokeObjectURL()
URL.revokeObjectURL()靜態方法用來釋放一個以前經過調用URL.createObjectURL(blob)方法生成的URL對象。

語法

window.URL.revokeObjectURL(objectUrl)
複製代碼

參數

objectUrl: URL.createObjectURL(blob)方法生成的URL對象；
複製代碼

今天先記錄下如何下載。明天記錄下如何上傳圖片