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>