js 利用html2canvas实现截图功能

需要导入的文件：jquery.min.js，html2canvas.js，canvas2image.js，jquery.qrcode.min.js（如需二维码）

var shareContent = document.getElementById("imgmodel"); //需要截图的包裹的（原生的）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 * 1; //定义canvas高度 *缩放
canvas.getContext("2d").scale(scale, scale); //获取context,设置scale 
var opts = {
scale : scale, // 添加的scale 参数
canvas : canvas, //自定义 canvas
logging : false, //日志开关
width : width, //dom 原始宽度
height : height//dom 原始高度

};

html2canvas(shareContent, opts).then(function(canvas) {

//生成图片
var img = Canvas2Image.convertToImage(canvas,canvas.width, canvas.height);

$(".body").append(img);
});

======================================================================

我在移动端开发使用它的时候，遇到了截屏不全的问题，原因是我待截图部分的内容用的是百分比布局，后来我换成了固定像素，藏在最下层

截图之后，成功的获取到了全部的内容

这样做的好处是，上面的scale = 2 ，是放大了两倍，但是倍数越大导致性能越慢，而且如果包含二维码，会导致二维码不清晰

二维码不清晰的后果是微信长按识别不了

一开始就同时放大待截图部分，这样截图出来的二维码是很清晰的，大家可以利用藏在背景下面来实现它

这样我们就能自动生成用户专属的二维码宣传海报