SOURCE

console 命令行工具 X clear

                    
>
console
 function savePic() {
    img = document.getElementById('pic');
    // 调用html2canvas插件
    html2canvas(img, {
        useCORS: true // 跨域配置,不加的话如果有非同源的图片会变空白
    }).then(function (canvas) {
        imgUrl = canvas.toDataURL("image/png");
        console.log(imgUrl);
        let image = new Image();
        // 解决跨域 Canvas 污染问题
        image.setAttribute("crossOrigin", "anonymous");
        image.onload = function () {
            let canvas = document.createElement("canvas");
            canvas.width = image.width;
            canvas.height = image.height;
            let context = canvas.getContext("2d");
            context.drawImage(image, 0, 0, image.width, image.height);
            let a = document.createElement("a"); // 生成一个a元素
            let event = new MouseEvent("click"); // 创建一个单击事件
            a.href = imgUrl; // 将生成的URL设置为a.href属性
            //如果是浏览器环境,通过直接添加a标签事件直接下载
            a.dispatchEvent(event); // 触发a的单击事件

        };
        image.src = imgUrl;
    });
}
<div id="pic">
.....
hihihiss
<img src="data:image/gif;base64,R0lGODlhSgAgAPcAAAAAAAAAMwAAZgAAmQAAzAAA/wArAAArMwArZgArmQArzAAr/wBVAABVMwBVZgBVmQBVzABV/wCAAACAMwCAZgCAmQCAzACA/wCqAACqMwCqZgCqmQCqzACq/wDVAADVMwDVZgDVmQDVzADV/wD/AAD/MwD/ZgD/mQD/zAD//zMAADMAMzMAZjMAmTMAzDMA/zMrADMrMzMrZjMrmTMrzDMr/zNVADNVMzNVZjNVmTNVzDNV/zOAADOAMzOAZjOAmTOAzDOA/zOqADOqMzOqZjOqmTOqzDOq/zPVADPVMzPVZjPVmTPVzDPV/zP/ADP/MzP/ZjP/mTP/zDP//2YAAGYAM2YAZmYAmWYAzGYA/2YrAGYrM2YrZmYrmWYrzGYr/2ZVAGZVM2ZVZmZVmWZVzGZV/2aAAGaAM2aAZmaAmWaAzGaA/2aqAGaqM2aqZmaqmWaqzGaq/2bVAGbVM2bVZmbVmWbVzGbV/2b/AGb/M2b/Zmb/mWb/zGb//5kAAJkAM5kAZpkAmZkAzJkA/5krAJkrM5krZpkrmZkrzJkr/5lVAJlVM5lVZplVmZlVzJlV/5mAAJmAM5mAZpmAmZmAzJmA/5mqAJmqM5mqZpmqmZmqzJmq/5nVAJnVM5nVZpnVmZnVzJnV/5n/AJn/M5n/Zpn/mZn/zJn//8wAAMwAM8wAZswAmcwAzMwA/8wrAMwrM8wrZswrmcwrzMwr/8xVAMxVM8xVZsxVmcxVzMxV/8yAAMyAM8yAZsyAmcyAzMyA/8yqAMyqM8yqZsyqmcyqzMyq/8zVAMzVM8zVZszVmczVzMzV/8z/AMz/M8z/Zsz/mcz/zMz///8AAP8AM/8AZv8Amf8AzP8A//8rAP8rM/8rZv8rmf8rzP8r//9VAP9VM/9VZv9Vmf9VzP9V//+AAP+AM/+AZv+Amf+AzP+A//+qAP+qM/+qZv+qmf+qzP+q///VAP/VM//VZv/Vmf/VzP/V////AP//M///Zv//mf//zP///wAAAAAAAAAAAAAAACH5BAEAAPwALAAAAABKACAAAAj/AAEIHEiwoMGDCBMqXMiwocOHECNKnOhQAsWLGBNazKhQgsePHDUyBMnxo0mTFzcWPKky5EKWLBFujOkwwKl9OPfNU+FSJkySEuPgpCXQAs51Bm3mxKmPSkSaKmkuvINTF0EjOIMdFBBtnz5FDaUSbCkRAlOnA7niBFtQ7T62K0+OzEh1H7u2oXCWM6hWHyEAYsNy7LoPaUGh+/LxJMgV5UKlS5sKJEvwyNLLdgcS1lqw7s6CA7p+fdgXLmWDiA0DMCpPM05hqHHOQ5uWMFyGbtmeNlgX9kALdwUiDj4QMvHaXv867Pt3t8FNRwUWoSIg2e+zjG3zvfm2IASrW7U7v++cFUAAZbQHIgYv0HJmvqJvA7Ajf2Bor4rGH8ZpDsARyQUFkFd3AJj1HnxrEfQAgdvhpB95kaVHkFGR1YfcPkQJ9EA0ACIogYUJIaaVER0ehFViiyU1IGbYhbfPh96xx1t0AYDih0JuZdgTAI35VRB9CUG3j2/TLZQAYTKGJIAECQ60IIgApAaRgDmViJEEhOm4oZUE1bXLjhMJyCSLXkko0IlLJQnmXGu22ZGbcB70YJw9zUlnSXfmqeeedAYEADs=">
</div>

<button onclick="savePic()">下载</button>

本项目引用的自定义外部资源