canvas使用注意事项：

1. canvas 放大缩小问题：

通过设置drawImage 放大,缩小
canvas.``style``.``width ``= imgW * scale + ``'px'``;
canvas.``style``.``height ``= imgH * scale + ``'px'``;
canvas.``width ``= imgW * scale``;
canvas.``height ``= imgH * scale``;
ctx.``drawImage``(oImg``,``30``,``30``,``imgW-``60``,``imgH-``60``,``0``,``0``,``canvas.``width``,``canvas.``height``)
结论：放大后变模糊有锯齿，缩小后变模糊且有锯齿，所以保持原图大小是最佳，如果要缩放，用原图缩放
图片放大测试：https://h5-act-beta.kajicam.com/kajicam/2020/canvas/scaleBig.html
图片缩小测试：https://h5-act-beta.kajicam.com/kajicam/2020/canvas/scaleSmall.html

2. canvas.toDataURL(type, encoderOptions)

参数：
type 可选图片格式，默认为 image/png
encoderOptions 可选在指定图片格式为 image/jpeg 或image/webp的情况下，可以从 0 到 1
的区间内选择图片的质量。如果超出取值范围，将会使用默认值 0.92。其他参数会被忽略。
《1》将一张图片缩放，然后转成两种格式，查看一下大小
将 big.jpeg （2600 * 1950，2.4M）图片缩小到原来的0.2倍，后分导出png，jpeg图片，结果
png图片``602Kb，jpeg图片 110Kb
结论:在能转 jpeg的情况下绝对不转png格式
测试链接：https://h5-act-beta.kajicam.com/kajicam/2020/canvas/toBase64.html

3. canvas.toBlob 和 canvas.toDataURL 对比

   《1》将一张图片缩放，将canvas绘制后的图用下列方式转 png <br />                toDataURL：   602KB<br />                toBlob：   441KB<br />        《2》将一张图片缩放，将canvas绘制后的图用下列方式转 jpeg<br />                toDataURL：   110KB<br />                toBlob：   80.4KB
     结论： 优先选用  toBlob 代替  toDataUrl <br />                    Base64 是一种基于 64 个可打印字符来表示二进制数据的表示方法。它将每 3 个 8bit 字符转换为 4 个 <br />                    6Bit 字符（由于 2^6 = 64，由此得名），**base64 编码后，编码对象的体积会变成原来的 4/3 倍**。<br />         测试链接：[https://h5-act-beta.kajicam.com/kajicam/2020/canvas/toBlob.html](https://h5-act-beta.kajicam.com/kajicam/2020/canvas/toBase64.html)

4. canvas.toBlob 应用：

var canvas = document.getElementById("canvas");
canvas.toBlob(function(blob) {
  var newImg = document.createElement("img"),
      url = URL.createObjectURL(blob);
  newImg.onload = function() {
    // no longer need to read the blob so it's revoked
    URL.revokeObjectURL(url);
  };
  newImg.src = url;
  document.body.appendChild(newImg);
});