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

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

前端绘图只能使用 canvas。

一、主要用到的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

二、使用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对象；
复制代码

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