html、canvas、file、dataurl、blob互相轉換介紹

html to canvas

html to canvas 的主要工做是還原佈局，這裏推薦一個第三方html2canvas：

html2canvas(document.body).then(function(canvas) {
  document.body.appendChild(canvas);
});
複製代碼

canvas to dataUrl or blob

主要是兩個api：HTMLCanvasElement.toDataURL 和 HTMLCanvasElement.toBlob

canvas api toDataURL ：

/** * HTMLCanvasElement.toDataURL * @param {string} type 圖片格式，默認格式爲image/png * @param {number} encoderOptions 在指定圖片格式爲 image/jpeg 或 image/webp 的狀況下，能夠從 0 到 1 的區間內選擇圖片的質量。若是超出取值範圍，將會使用默認值 0.92 */
canvas.toDataURL(type, encoderOptions);
複製代碼

canvas api toBlob ：

/** * HTMLCanvasElement.toBlob * @param {function} callback 回調函數，可得到一個單獨的Blob對象參數。 * @param {string} type 圖片格式，默認格式爲image/png * @param {number} encoderOptions 值在0與1之間，當請求圖片格式爲image/jpeg或者image/webp時用來指定圖片展現質量 */
canvas.toBlob(callback, type, encoderOptions);
複製代碼

toBlob polyfill :

if (!HTMLCanvasElement.prototype.toBlob) {
  Object.defineProperty(HTMLCanvasElement.prototype, "toBlob", {
    value: function(callback, type, quality) {
      var binStr = atob(this.toDataURL(type, quality).split(",")[1]),
        len = binStr.length,
        arr = new Uint8Array(len);

      for (var i = 0; i < len; i++) {
        arr[i] = binStr.charCodeAt(i);
      }

      callback(new Blob([arr], { type: type || "image/png" }));
    }
  });
}
複製代碼

blob to dataUrl

api createObjectURL ：

var newImg = document.createElement("img"),
  url = URL.createObjectURL(blob);
newImg.onload = function() {
  // 讀取完成後，手動回收
  URL.revokeObjectURL(url);
};
newImg.src = url;
document.body.appendChild(newImg);
複製代碼

file to dataUrl

api FileReader.readAsDataURL ：

<input type="file" onchange="previewFile()" /><br />
<img src="" height="200" alt="Image preview..." />
<script> function previewFile() { var preview = document.querySelector("img"); var file = document.querySelector("input[type=file]").files[0]; var reader = new FileReader(); reader.addEventListener( "load", function() { preview.src = reader.result; }, false ); if (file) { reader.readAsDataURL(file); } } </script>
複製代碼

api createObjectURL ：

<input type="file" onchange="previewFile()" /><br />
<img src="" height="200" alt="Image preview..." />
<script> function previewFile() { var preview = document.querySelector("img"); var file = document.querySelector("input[type=file]").files[0]; preview.onload = function() { // 讀取完成後，手動回收 URL.revokeObjectURL(url); }; preview.src = window.URL.createObjectURL(file); } </script>
複製代碼