最近发现各种测试结果，未来预测遍布朋友圈，生成个性名片，保存测试结果等等应用成了推广策划们的"常用技俩"，总结一点就是网页截屏，通过用户自主填写或是答案生成图片然后发朋友圈或是其他的圈。
而html2canvas 能帮助前端小白实现这一功能：
html2canvas 能够实现在用户浏览器端直接对整个或部分页面进行截屏。
html2canvas 脚本将当页面渲染成一个Canvas图片，通过读取DOM并将不同的样式应用到这些元素上实现，然后生成Canvas，能让用户保存为图片。
html2canvas官网
我之所以青睐html2canvas是因为支持对局部进行截取，我需要做得就是处理好所有的样式并把需要保存成图片的部分放在一个DOM里面，而不是重新用canvas绘制一个一样的图片。虽然不力推，但对于不熟悉canvas和赶时间的宝宝html2canvas真的是一个不错的选择呀！
基本语法：
html2canvas(element, options); // element是需要截图的元素，options为可选项，参数控制
options选项：
| 参数 | 描述 |
|---|---|
| canvas | 自定义 canvas |
| width/height | canvas的宽度/高度设定 |
| allowTaint | 允许跨域（默认false） |
| useCORS | 【重要】开启跨域配置（默认false） |
| proxy | 代理地址 |
| taintTest | 是否在渲染前测试图片 |
| timeout | 图片加载延迟，默认延迟为0，单位毫秒 |
| logging | 在Console中输出信息（默认false） |
| background | canvas的背景颜色（默认#fff） |
| … | … |
由于设备像素比devicePixelRatio决定了canvas的清晰度，所以通常情况下我们会通过放大待画元素的宽高，然后最终生成图片的再缩小到原始比例。
首先需要两个js文件：html2canvas 和 canvas2Image
图像处理代码：
var cntElem = $('.canvasBox')[0];
var shareContent = cntElem;//需要截图的包裹的（原生的）DOM 对象
var width = shareContent.offsetWidth; //获取dom 宽度
var height = shareContent.offsetHeight; //获取dom 高度
var canvas = document.createElement("canvas"); //创建一个canvas节点
var scale = 2; //定义任意放大倍数 支持小数
canvas.width = width * scale; //定义canvas 宽度 * 缩放
canvas.height = height * scale; //定义canvas高度 *缩放
canvas.getContext("2d").scale(scale, scale); //获取context,设置scale
var opts = {
scale: scale, // 添加的scale 参数
canvas: canvas, //自定义 canvas
// logging: true, //日志开关，便于查看html2canvas的内部执行流程
width: width, //dom 原始宽度
height: height,
useCORS: true // 【重要】开启跨域配置
};
html2canvas(shareContent, opts).then(function (canvas) {
var context = canvas.getContext('2d');
// 【重要】关闭抗锯齿
context.mozImageSmoothingEnabled = false;
context.webkitImageSmoothingEnabled = false;
context.msImageSmoothingEnabled = false;
context.imageSmoothingEnabled = false;
// 【重要】默认转化的格式为png,也可设置为其他格式
var img = Canvas2Image.saveAsPNG(canvas, canvas.width, canvas.height);
document.body.appendChild(img);
$(img).css({
// 根据需求设置图片样式
"width": canvas.width / 2 + "px",
"height": canvas.height / 2 + "px",
});
});
案例：
需求：根据抽到的签生成图片
小白菜一枚，欢迎指正(〃‘▽’〃)
效果预览：https://bestjhh.github.io/Zodiac/
完整代码：https://github.com/bestjhh/Zodiac