最近做了个需求，设计提供几张切图。前端把切图还有后台返回的文本信息，拼接到一块绘制为一张图片。然后会下载、或者上传。 做起来其实还是挺简单的。下面说下大概的流程。
前端绘图只能使用 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对象； 今天先记录下如何下载。明天记录下如何上传图片
原文发布时间为：2018年06月22日
原文作者：要吃早餐
本文来源：
掘金 https://juejin.im/entry/5b3a29f95188256228041f46如需转载请联系原作者
![webstorm中配置git[图]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)