使用js将html代码一键截成图片（canvas）

2023年10月29日 337次阅读 来源: 李佳明先生

先上演示链接，demo
依赖：

  1. jquery
  2. html2canvas.js ====>官网github https://github.com/ni….，网络不好的，链接：传送门
    提取码：4fsc
$(function () {
        //id btn触发点击事件
        $("#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，只需要调用html2canvas(element[, options]);
将目标元素生成为canvas元素后，调用canvas.toDataURL()方法，即生成图片的地址（base64格式，浏览器可以直接打开），然后通过a链接模拟点击下载即可

    原文作者：李佳明先生
    原文地址: https://www.jianshu.com/p/3797b24372fc
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞