使用 canvas 绘制图片，然后下载、上传

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

前端绘图只能使用 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); // 浏览器就会自动下载了

canvas.toBlob(callback, type, encoderOption); 

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

 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)

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

window.URL.revokeObjectURL(objectUrl)

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

本文来源： 掘金 如需转载请联系原作者