将指定的元素生成图片

引用插件：

 

<script src="js/html2canvas.min.js"></script>

<script src="js/canvas2image.js"></script>

 

实现方法：

function convert2canvas(){

var shareContent = document.querySelector('.expression');//需要截图的包裹的（原生的）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(document.querySelector('.expression'),opts).then(function(canvas) {

var img = Canvas2Image.convertToImage(canvas, canvas.width, canvas.height);

$('.create_box .expression .image_box').append(img);

$(img).css({

"width": canvas.width / 2 + "px",

"height": canvas.height / 2 + "px",

}).addClass('img_box');

});

 

}

转载于:https://www.cnblogs.com/shiapi/p/9181744.html