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>
复制代码