js 截取长图（html2canvas）,并下载

最新推荐文章于 2024-07-10 16:55:19 发布

置顶 qq_38046742

最新推荐文章于 2024-07-10 16:55:19 发布

阅读量2k

点赞数 3

文章标签： js

本文链接：https://blog.csdn.net/qq_38046742/article/details/107866313

版权

1、首先引入html2canvas.min.js, 官网地址:http://html2canvas.hertzen.com/

2、开干

var dataURIToBlob =  function (imgName, dataURI, callback) {
        var binStr = atob(dataURI.split(',')[1]),
            len = binStr.length,
            arr = new Uint8Array(len);

        for (var i = 0; i < len; i++) {
            arr[i] = binStr.charCodeAt(i);
        }
        callback(imgName, new Blob([arr]));
    }

    var callback = function (imgName, blob) {
        var triggerDownload = $("<a>").attr("href", URL.createObjectURL(blob)).attr("download", imgName).appendTo("body").on("click", function () {
            if (navigator.msSaveBlob) {
                return navigator.msSaveBlob(blob, imgName);
            }
        });
        triggerDownload[0].click();
        triggerDownload.remove();
    };
    
    /*使用的话只需看这段代码*/
    function createImg() {
        // 步骤一: 设置生成图片的名字
        var imgName = $("#Number").val() + ".png";
        // 步骤二: 选择需要截取的dom, 可以更具需求修改选择器
        var shareContent = document.getElementById('depotHeadDlg');
        // 克隆一下需要截取的dom（这个操作必须有, 不然的话页面以外看不到的内容会截取不到）
        var copyDom = shareContent.cloneNode(true);
        copyDom.style.width = shareContent.scrollWidth  + "px";
        copyDom.style.height = shareContent.scrollHeight  + "px";
        document.querySelector("body").appendChild(copyDom);
        // 步骤三: 调用html2canvas 截图
        html2canvas(copyDom).then(function (canvas) {
            const context = canvas.getContext("2d");
            context.imageSmoothingEnabled = false;
            context.webkitImageSmoothingEnabled = false;
            context.msImageSmoothingEnabled = false;
            context.imageSmoothingEnabled = false;
            let imgUrl = canvas.toDataURL("image/png").replace("image/png","image/octet-stream");
            dataURIToBlob(imgName, imgUrl, callback);
            copyDom.remove();
        });
    }

3、调用createImg方法就可以截图了