html2canvas.js网页截图功能

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了html2canvas.js网页截图功能相关的知识,希望对你有一定的参考价值。

需求:将网页生成图片,用户自行长按图片进行保存图片,再分享朋友圈。其中,都可识别图中的二维码。(二维码过小会识别不出)

首先,先来科普一下微信网页识别二维码原理:截屏识别,当客户端发现用户在网页的img标签内进行长按操作时,会立刻截屏并且启动二维码识别算法。https://www.cnblogs.com/daipi...

发现官网中的html2canvas.js插件存在一些bug:


1.截图不全,不完整
    解决方案:
    //修改源码,添加自定设置高度宽度
    

var width = options.width != null ? options.width : node.ownerDocument.defaultView.innerWidth;


var height = options.height != null ? options.height : node.ownerDocument.defaultView.innerHeight;
return renderDocument(node.ownerDocument, options, width, height, index).then(function (canvas) {**

    if (typeof(options.onrendered) === "function") {
        log("options.onrendered is deprecated, html2canvas returns a Promise containing the canvas");
        options.onrendered(canvas);
    }
    return canvas;
});

 2.图片像素模糊:
 解决方案:添加dpi参数
 
 function CanvasRenderer(width, height) {
                Renderer.apply(this, arguments);
                this.canvas = this.options.canvas || this.document.createElement("canvas");
                if (!this.options.canvas) {
                    if (this.options.dpi) {
                        this.options.scale = this.options.dpi / 96
                    }
                    this.canvas.width = width;
                    this.canvas.height = height
                }
                this.ctx = this.canvas.getContext("2d");
                this.taintCtx = this.document.createElement("canvas").getContext("2d");
                this.ctx.textBaseline = "bottom";
                this.variables = {};
                log("Initialized CanvasRenderer with size", width, "x", height)
  }
  

最后写写html2canvas的使用方法:


 var height = $('.teacher_page').scrollTop() + $('.teacher_page').outerHeight(true);
     html2canvas($(".teacher_page"),{ 
         height:height,
        // window.devicePixelRatio是设备像素比
         dpi: 192,//放大像素(2倍),以免图片模糊
     }).then(function(canvas) {
         var imgUri = canvas.toDataURL("image/png").replace("image/png", "image/octet-stream"); 
         $('.popBody').html('<img alt="二维码" src="'+imgUri+'" id="canvas"/>');
    });

官网:http://html2canvas.hertzen.com/
下载地址:https://www.bootcdn.cn/html2c...

原文地址:https://segmentfault.com/a/1190000016876592


以上是关于html2canvas.js网页截图功能的主要内容,如果未能解决你的问题,请参考以下文章

html2canvas.js插件截图空白问题

html2canvas实现js截图

关于html2canvas用法的总结

使用html2canvas js 截取网页图片下载

JavaScript:截图呈现的网页浏览器样式

网页中DOM元素转换成图片