html2canvas.js网页截图功能

Alex 发布于2019-08-23 12:39 / 2320人阅读

摘要：需求将网页生成图片，用户自行长按图片进行保存图片，再分享朋友圈。发现官网中的插件存在一些截图不全，不完整解决方案修改源码，添加自定设置高度宽度图片像素模糊解决方案添加参数参考链接最后写写的使用方法是设备像素比官网下载地址

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

首先，先来科普一下微信网页识别二维码原理：截屏识别，当客户端发现用户在网页的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;   // 1 CSS inch = 96px.
                    }
                    if (this.options.scale) {
                        this.canvas.style.width = width + "px";
                        this.canvas.style.height = height + "px";
                        this.canvas.width = Math.floor(width * this.options.scale);
                        this.canvas.height = Math.floor(height * this.options.scale);
                        this.ctx.scale(this.options.scale, this.options.scale);
                    } else {
                        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)
  }
  
  
   return parser.ready.then(function() {
        log("Finished rendering");
        var canvas;

        if (options.type === "view") {
            canvas = crop(renderer.canvas, {width: renderer.canvas.width, height: renderer.canvas.height, top: 0, left: 0, x: 0, y: 0});
        } else if (node === clonedWindow.document.body || node === clonedWindow.document.documentElement || options.canvas != null) {
            canvas = renderer.canvas;
        } else if (options.scale) {
            var origBounds = {width: options.width != null ? options.width : bounds.width, height: options.height != null ? options.height : bounds.height, top: bounds.top, left: bounds.left, x: 0, y: 0};
            var cropBounds = {};
            for (var key in origBounds) {
                if (origBounds.hasOwnProperty(key)) { cropBounds[key] = origBounds[key] * options.scale; }
            }
            canvas = crop(renderer.canvas, cropBounds);
            canvas.style.width = origBounds.width + "px";
            canvas.style.height = origBounds.height + "px";
        } else {
            canvas = crop(renderer.canvas, {width:  options.width != null ? options.width : bounds.width, height: options.height != null ? options.height : bounds.height, top: bounds.top, left: bounds.left, x: 0, y: 0});
        }

        cleanupContainer(container, options);
        return canvas;
    });

参考链接：https://www.jianshu.com/p/f40...
最后写写html2canvas的使用方法：

 var height = $(".teacher_page").scrollTop() + $(".teacher_page").outerHeight(true);
     html2canvas($(".teacher_page"),{ 
         height:height,
        // window.devicePixelRatio是设备像素比
         dpi: window.devicePixelRatio,
     }).then(function(canvas) {
         var imgUri = canvas.toDataURL("image/png").replace("image/png", "image/octet-stream"); 
         $(".popBody").html("");
    });

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

云服务器 GPU云服务器 js视频截图功能网页截图 html5截图功能 html5视频截图功能

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/98900.html

网页保存为图片及高清截图的优化 | canvas跨域图片配置

摘要：本次技术调研来源于项目中的一个重要功能需求实现微信长按网页保存为截图。以下主要解决两类跨域的图片资源包括已配置过的中的图片资源和微信用户头像图片资源。本次技术调研来源于H5项目中的一个重要功能需求：实现微信长按网页保存为截图。这里有个栗子（请用微信打开，长按图片即可保存）：3分钟探索你的知识边界将整个网页保存为图片是一个十分有趣的功能，常见于H5活动页的结尾页分享。以下则是项目中...

zhaochunqi 2019-08-01 17:43 评论0 收藏0
网页保存为图片及高清截图的优化 | canvas跨域图片配置

摘要：本次技术调研来源于项目中的一个重要功能需求实现微信长按网页保存为截图。以下主要解决两类跨域的图片资源包括已配置过的中的图片资源和微信用户头像图片资源。本次技术调研来源于H5项目中的一个重要功能需求：实现微信长按网页保存为截图。这里有个栗子（请用微信打开，长按图片即可保存）：3分钟探索你的知识边界将整个网页保存为图片是一个十分有趣的功能，常见于H5活动页的结尾页分享。以下则是项目中...

GHOST_349178 2019-08-21 16:51 评论0 收藏0
网页保存为图片及高清截图的优化 | canvas跨域图片配置

摘要：本次技术调研来源于项目中的一个重要功能需求实现微信长按网页保存为截图。以下主要解决两类跨域的图片资源包括已配置过的中的图片资源和微信用户头像图片资源。本次技术调研来源于H5项目中的一个重要功能需求：实现微信长按网页保存为截图。这里有个栗子（请用微信打开，长按图片即可保存）：3分钟探索你的知识边界将整个网页保存为图片是一个十分有趣的功能，常见于H5活动页的结尾页分享。以下则是项目中...

Galence 2019-08-30 15:53 评论0 收藏0
html2canvas.js网页截图功能

摘要：需求将网页生成图片，用户自行长按图片进行保存图片，再分享朋友圈。发现官网中的插件存在一些截图不全，不完整解决方案修改源码，添加自定设置高度宽度图片像素模糊解决方案添加参数参考链接最后写写的使用方法是设备像素比官网下载地址需求：将网页生成图片，用户自行长按图片进行保存图片，再分享朋友圈。其中，都可识别图中的二维码。（二维码过小会识别不出）首先，先来科普一下微信网页识别二维码原理：截屏...

MSchumi 2019-08-02 11:52 评论0 收藏0
基于html2canvas实现网页保存为图片及图片清晰度优化

摘要：本次技术调研来源于项目中的一个重要功能需求实现微信长按网页保存为截图。小结是目前实现网页保存为图片功能的综合最佳选择。本次技术调研来源于H5项目中的一个重要功能需求：实现微信长按网页保存为截图。这里有个栗子（请用微信打开，长按图片即可保存）：3分钟探索你的知识边界将整个网页保存为图片是一个十分有趣的功能，常见于H5活动页的结尾页分享。以下则是项目中调研和踩坑的一些小结和汇总。 ...

JerryWangSAP 2019-08-30 13:45 评论0 收藏0