html2canvas.js網(wǎng)頁(yè)截圖功能

MSchumi 發(fā)布于2019-08-02 11:52 / 3367人閱讀

摘要：需求將網(wǎng)頁(yè)生成圖片，用戶自行長(zhǎng)按圖片進(jìn)行保存圖片，再分享朋友圈。發(fā)現(xiàn)官網(wǎng)中的插件存在一些截圖不全，不完整解決方案修改源碼，添加自定設(shè)置高度寬度圖片像素模糊解決方案添加參數(shù)參考鏈接最后寫寫的使用方法是設(shè)備像素比官網(wǎng)下載地址

需求：將網(wǎng)頁(yè)生成圖片，用戶自行長(zhǎng)按圖片進(jìn)行保存圖片，再分享朋友圈。其中，都可識(shí)別圖中的二維碼。（二維碼過(guò)小會(huì)識(shí)別不出）

首先，先來(lái)科普一下微信網(wǎng)頁(yè)識(shí)別二維碼原理：截屏識(shí)別，當(dāng)客戶端發(fā)現(xiàn)用戶在網(wǎng)頁(yè)的img標(biāo)簽內(nèi)進(jìn)行長(zhǎng)按操作時(shí)，會(huì)立刻截屏并且啟動(dòng)二維碼識(shí)別算法。https://www.cnblogs.com/daipi...

發(fā)現(xiàn)官網(wǎng)中的html2canvas.js插件存在一些bug：

1.截圖不全，不完整
    解決方案：
    //修改源碼，添加自定設(shè)置高度寬度

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參數(shù)
 
 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是設(shè)備像素比
         dpi: window.devicePixelRatio,
     }).then(function(canvas) {
         var imgUri = canvas.toDataURL("image/png").replace("image/png", "image/octet-stream"); 
         $(".popBody").html("");
    });

官網(wǎng)：http://html2canvas.hertzen.com/
下載地址：https://www.bootcdn.cn/html2c...

云服務(wù)器 GPU云服務(wù)器 js視頻截圖功能網(wǎng)頁(yè)截圖 html5截圖功能 html5視頻截圖功能

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/53179.html

發(fā)表評(píng)論

登陸后可評(píng)論

0條評(píng)論

MSchumi

男|高級(jí)講師

我要關(guān)注我要私信

TA的文章

面向照相機(jī)的開發(fā)

閱讀 1994·2021-11-22 14:45
全國(guó)大學(xué)生軟件測(cè)試大賽web性能測(cè)試

閱讀 2616·2021-10-12 10:11
2021-09-20

閱讀 779·2021-09-22 10:02
前端小白的面經(jīng)小記

閱讀 1242·2019-08-30 15:55
【每日一包0028】cache-content-type,mime-types

閱讀 1150·2019-08-30 15:54
【每日一包0027】statuses

閱讀 3261·2019-08-30 15:54
idea中markdown插件的css樣式推薦

閱讀 1201·2019-08-29 17:16
使用css實(shí)現(xiàn)全兼容tooltip提示框

閱讀 3095·2019-08-28 17:55

成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！

html2canvas.js網(wǎng)頁(yè)截圖功能

相關(guān)文章

網(wǎng)頁(yè)保存為圖片及高清截圖的優(yōu)化 | canvas跨域圖片配置

網(wǎng)頁(yè)保存為圖片及高清截圖的優(yōu)化 | canvas跨域圖片配置

網(wǎng)頁(yè)保存為圖片及高清截圖的優(yōu)化 | canvas跨域圖片配置