二 HTML5 Canvas 实现图片压缩和裁切

上篇讲到drawImage 这个API，这篇详细说介绍

尽管有各种裁剪的插件，但是在手机端 ，我不喜欢 。我喜欢友好操作的方式。所以详细介绍！！！

CanvasRenderingContext2D.drawImage()

drawImage 有 3 种调用方式：

ctx.drawImage(image, dx, dy);
ctx.drawImage(image, dx, dy, dWidth, dHeight);
ctx.drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight);

• image 图片元素，除了图片，还支持其他 3 种格式，分别是 HTMLVideoElement HTMLCanvasElement ImageBitmap ，本文只涉及图片，如果想了解其余格式可以参考https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/drawImage
• sx 要绘制到 canvas 画布的源图片区域（矩形）在 X 轴上的偏移量（相对源图片左上角）
• sy 与 sx 同理，只是换成 Y 轴
• sWidth 要绘制到 canvas 画布中的源图片区域的宽度，如果没有指定这个值，宽度则是 sx 到图片最右边的距离
• sHeight 要绘制到画布中的源图片区域的高度，如果没有指定这个值，高度则是 sy 到图片最下边的距离
• dx 源图片左上角在 canvas 画布 X 轴上的偏移量
• dy 源图片左上角在画布 Y 轴上的偏移量
• dWidth 绘制图片的 canvas 画布宽度
• dHeight 绘制图片的画布高度
• 图例
  
  

  HTMLCanvasElement.toDataURL()

  toDataURL 是 canvas 画布元素的方法，返回指定图片格式的 data URI，也就是 base64 编码串。

  toDataURL 方法最多接受两个参数，并且这两个参数都是可选的：

  • type 图片格式。支持 3 种格式，分别是 image/jpeg image/png image/webp ，默认是 image/png 。其中 image/webp 只有 chrome 才支持。
  • quality 图片质量。0 到 1 之间的数字，并且只在格式为 image/jpeg 或 image/webp 时才有效，如果参数值格式不合法，将会被忽略并使用默认值。

  另外，如果对应的 canvas 画布宽度或高度为 0，将会得到字符串 data:, ，若图片格式不是 image/png，却得到一个以 data:image/png 开头的值，则说明不支持此图片格式。

  图片质量

• 对于图片质量参数的默认值，官方文档并没有说明
  
  代码事例
  

  HTML：
  
  <canvas id="canvas"></canvas>
  <img id="preview" src="">
  <img id="source" src="" style="display: none;">
  JS：
  
  var canvas = document.getElementById('canvas');
  var source = document.getElementById('source');
  var preview = document.getElementById('preview');
  
  source.onload = function() {
      var width = source.width;
      var height = source.height;
      var context = canvas.getContext('2d');
  
      // draw image params
      var sx = 0;
      var sy = 0;
      var sWidth = width;
      var sHeight = height;
      var dx = 0;
      var dy = 0;
      var dWidth = width;
      var dHeight = height;
      var quality = 0.92;
  
      canvas.width = width;
      canvas.height = height;
  
      context.drawImage(source, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight);
  
      var dataUrl = canvas.toDataURL('image/jpeg', quality);
      preview.src = dataUrl;
  };

  注：实践发现经过canvas处理过的图片，下载下来查看属性，果然比之前小了~~哈哈。这才是正点！