最近做了个需求，设计提供几张切图。前端把切图还有后台返回的文本信息，拼接到一块绘制为一张图片。然后会下载、或者上传。 做起来其实还是挺简单的。下面说下大概的流程。
前端绘图只能使用 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对象；复制代码
今天先记录下如何下载。明天记录下如何上传图片