將指定的元素生成圖片

引用插件：

 

<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');

});

 

}