最近做了个需求，设计提供几张切图。前端把切图还有后台返回的文本信息，拼接到一块绘制为一张图片。然后会下载、或者上传。做起来其实还是挺简单的。下面说下大概的流程。

前端绘图只能使用 canvas。

1、主要用到的canvas API 有以下几个：

    let cvs = document.createElement('canvas');
    let ctx = cvs.getContext('2d');
    // 设置填充颜色，也可以设置字体颜色
    ctx.fillStyle = bgcColor; 
    // 设置文本信息。字体、大小、font-weight等。
    ctx.font = 'bold 20px 宋体'; 
    // 设置文本对齐方式
    ctx.textAlign = 'center'; // left || right || center || start || end; 总共五个值，常用left、center;
    // 设置文本基线对齐方式 类似于css的 vertical-align  
    ctx.textBaseLine = 'middle'; // top || hanging || middle || alphabetic || ideographic || bottom
    // 绘制文本  text: 文本内容。x: 文本的X坐标。y: 文本的Y坐标。maxWidth: 绘制文本的最大宽度。
    ctx.fillText(text, x, y, maxWidth);
    // 计算文本所占的宽度  这个方法返回一个对象，有个 width 属性。
    ctx.measureText(text)
    // 绘制矩形
    ctx.fillRect(0, 0, width, height);
    // 绘制图片 img: 目标图片。x: X坐标。y: Y坐标。width：绘制的宽度。height：绘制的高度。
    ctx.drawImg(img, x, y, width, height);
    // 绘制圆
    ctx.arc()

canvas的详情参考 https://www.w3cplus.com/blog/tags/616.html

2、使用canvas 绘图完毕后。提供导出下载

canvas 有两个API。可以把绘制的图片转为可下载的文件。

 canvas.toDataURL() 方法返回一个包含图片展示的 dataURL。可以使用 type 参数设置类型。默认为 PNG 格式。图片的分辨率为 96dpi; 
 * 如果画布的高度或宽度 为0 那么会返回字符串 “data:,”
 * 如果传入的类型非"image/png",但是返回的值以"data:image/png"开头，那么该类型是不支持的。
 * chrome 支持 "image/webp"类型

语法

 canvas.toDataURL(type, encoderOptions);

参数

 type: 图片格式。默认为 image/png;
 encoderOptions: 在指定的格式为 'image/jpeg'、'image/webp'的情况下，可以设置从0 - 1 的值来改变图片的质量。
         如果超出取值范围会设置为 0.92 。其他参数会忽略

返回值

返回一个 包含 dataURL 的 DOMString (也就是base64);

如何下载

  // 下载方法。
  /**
   *@param imgSrc 文件链接可以是一个dataURL 也可以是一个 blob 对象。
   *@param imgName  下载后的文件名字。
  */
  function downloadImg (imgSrc, imgName) {
      let elem = document.createElement('a');
      elem.setAttribute('href', imgSrc);
      elem.setAttribute('download', imgName);
      document.body.appendChild(elem);
      elem.click();
      document.body.removeChild(elem);
  }

看了上面这些方法之后，这个需求就比较简单了

  let cvs = document.createElement('canvas');
  let ctx = cvs.getContext('2d');
  .....
  //图片绘制完成
  let imgSrc = ctx.toDataURL('image/jpeg', 0.9);
  let imgName = '测试图片.jpg';
  downloadImg(imgSrc, imgName); // 浏览器就会自动下载了

一开始，我用的就是上面这种方法下载，不过当绘制下载一个比较大的图片时，浏览器就会提示下载失败。查了资料，原来使用dataURL进行下载会有大小限制。后来再次查资料发现可以使用 blob 进行下载。

关于blob的详情请参考：https://developer.mozilla.org/zh-CN/docs/Web/API/Blob

了解一下，canvas 如何转为 blob

语法

canvas.toBlob(callback, type, encoderOption);

参数

callback:  因为canvas 如何转为 blob是一个异步操作，所以需要一个回调函数，参数就是 blob对象。
type: 指定图片格式。默认为: 'image/png';
encoderOption: 在指定的格式为 'image/jpeg'、'image/webp'的情况下，可以设置从0 - 1 的值来改变图片的质量。
      如果超出取值范围会设置为 0.92 。其他参数会忽略

这个方法没有返回值。

好了，现在看下如何使用 blob 进行下载

 let cvs = document.createElement('canvas');
 let ctx = cvs.getContext('2d'); 
 .....
 // 图片绘制完成
 ctx.toBlob(function (blob) {
     let imgSrc = window.URL.createObjectURL(blob);
     let imgName = '测试图片.jpg';
     downloadImg(imgSrc, imgName);
     window.URL.revokeObjectURL(imgSrc);
 }, 'image/jpeg', 0.9)

有两个方法，之前没有了解过，今天就记录一下。\

URL.createObjectURL()
看到MDN上对这个方法的介绍，这是一个实验中的功能，某些浏览器尚在开发中。该标准对应的文档可能被重新修订，所以在未来版本的浏览器中，该功能的语法和行为也可能改变。（这些东西，以后再说，现在是管不了那么多了。都怪产品^_^）。

URL.createObjectURL() 静态方法会创建一个 DOMString ,其中包含一个表示参数中给出的对象的URL。这个URL的生命周期和创建它的窗口中的 document绑定。这个新的URL对象表示指定的File对象或Blob对象。
语法

objectURL = URL.createObjectURL(blob);  // window可以省略

参数
用来创建URL的 File 或 Blob对象。
注意事项
在每次调用URL.createObjectURL(blob)方法时，都会创建一个新的URL对象，尽管已经用相同的参数创建过。所以，当不再需要这个URL对象时，必须通过调用URL.revokeObjectURL()方法来释放。浏览器会在文档退出的时候，释放它们，不过为了获得最佳使用性能以及内存状况，你应该在安全的时机主动释放它们。

URL.revokeObjectURL()
URL.revokeObjectURL()静态方法用来释放一个之前通过调用URL.createObjectURL(blob)方法生成的URL对象。

语法

window.URL.revokeObjectURL(objectUrl)

参数

objectUrl: URL.createObjectURL(blob)方法生成的URL对象；

今天先记录下如何下载。明天记录下如何上传图片