先上演示鏈接万牺，demo
依賴：
- jquery
- html2canvas.js ====>官網(wǎng)github https://github.com/ni....，網(wǎng)絡(luò)不好的杏愤，鏈接：傳送門
提取碼：4fsc
$(function () {
//id btn觸發(fā)點(diǎn)擊事件
$("#btn").click(function () {
//將用canvas繪制的容器
html2canvas($("#card-main").get(0)).then(function (canvas) {
document.body.appendChild(canvas);
var url = canvas.toDataURL();//圖片地址
var timestamp = Date.parse(new Date());
$("#downA").attr('href', url);
//下載下來的圖片名字
$("#downA").attr('download', timestamp + '.png');
$("#downA").get(0).click()
});
});
})
解讀：
html2canvas.js可將一個元素渲染為canvas，只需要調(diào)用html2canvas(element[, options]);
將目標(biāo)元素生成為canvas元素后通殃，調(diào)用canvas.toDataURL()方法厕宗，即生成圖片的地址（base64格式，瀏覽器可以直接打開）已慢，然后通過a鏈接模擬點(diǎn)擊下載即可
