嘿嘿哈哈

html2canvas.js截图只截取当前可视区域问题
html2canvas.js截取完整DOM节点问题解决方法$("#downpdf").on(&...
扫描右侧二维码阅读全文
02
2019/01

html2canvas.js截图只截取当前可视区域问题

html2canvas.js截取完整DOM节点问题解决方法

$("#downpdf").on("click", function() {
    //获取节点高度,后面为克隆节点设置高度。
    var height = $(TargetNode).height()
    //克隆节点,默认为false,不复制方法属性,为true是全部复制。
    var cloneDom = $(TargetNode).clone(true);
    //设置克隆节点的css属性,因为之前的层级为0,我们只需要比被克隆的节点层级低即可。
    cloneDom.css({
        "background-color": "white",
        "position": "absolute",
        "top": "0px",
        "z-index": "-1",
        "height": height
    });
    //将克隆节点动态追加到body后面。
    $("body").append(cloneDom);
    //插件生成base64img图片。
    html2canvas(cloneDom, {
        //Whether to allow cross-origin images to taint the canvas
        allowTaint: true,
        //Whether to test each image if it taints the canvas before drawing them
        taintTest: false,
        onrendered: function(canvas) {
            var img = canvas.toDataURL('image/jpeg', 1.0);
            //打印出来之后:data:image/jpeg;base64,/9j/4AAQSkZJRg....
            //可以通过chrome来查看
            console.log(img);
        }
    });
});
Last modification:January 2nd, 2019 at 08:22 pm

Leave a Comment