javascript 实现保存页面为图片

需要的第三方库:
1.jquery.js(https://cdn.bootcss.com/jquery/3.3.1/jquery.js
2.html2canvas.js(https://github.com/niklasvh/html2canvas
3.canvas2image.js(https://github.com/hongru/canvas2image

function convert2canvas() {
    
    //保存body标签内的所有内容为图片
    var shareContent = document.body;
    var width = shareContent.offsetWidth;
    var height = shareContent.offsetHeight;
    var canvas = document.createElement("canvas");
    var scale = 2;

    canvas.width = width * scale;
    canvas.height = height * scale;
    canvas.getContext("2d").scale(scale, scale);

    var opts = {
        scale: scale,
        canvas: canvas,
        logging: true,
        width: width,
        height: height
    };
    html2canvas(shareContent, opts).then(function(canvas) {
        var context = canvas.getContext('2d');

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

        document.body.appendChild(img);
        $(img).css({
            "width": canvas.width / 2 + "px",
            "height": canvas.height / 2 + "px",
        })
    });
}
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 作为一个前端程序猿,下面这些站会让你眼前一亮。 amazeui框架组建丰富 http://amazeui.org...
    欧巴冰冰阅读 8,942评论 18 303
  • 今天撒了一个谎,对她说公文已报,其实还没报。惭愧。
    烟涩寒阅读 198评论 0 0
  • 罗曼·罗兰说“人们常觉得准备的阶段是在浪费时间,只有当真正的机会来临,而自己没有能力把握的时候,才能觉悟到自己平时...
    带着宝宝来学习阅读 186评论 0 0
  • 01 知乎上有人问:什么地方儿女最孝顺?有人不禁调侃道:朋友圈。 看到这个问答时,不禁感叹网友的神逻辑。的确,每年...
    萧筱筱阅读 1,457评论 15 19
  • 采薇在偏头的那一刹那,嘴唇碰到一片很软很暖的——唇,两人像点了穴似的怔住了…… 采薇本能的后退,他搭在她椅背上的右...
    艾就爱阅读 336评论 0 0