canvas截屏网页为图片下载到本地-html2canvas.js_java使用canvas+js 截屏并下载到本地-CSDN博客

本文链接：https://blog.csdn.net/qq_38369907/article/details/103822085

本文介绍如何利用html2canvas插件将网页的某个部分转换为图片，并提供了详细的代码实现，包括创建canvas元素，调用html2canvas方法，以及将生成的图片数据保存到本地的步骤。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

说明：此方法主要是运用canvas
插件：html2canvas.js
插件地址下载：http://html2canvas.hertzen.com/

在此再附带赠送一位大佬自己页面的链接：https://www.baidufe.com/
（备注：插件多多，组件多多，dome多多！！！）

//canvasImg为需要截取成图片的html部分
html2canvas(canvasImg).then(function(canvas) {
    imgUrl = canvas.toDataURL("image/png").replace("image/png", "image/octet-imgUrleam")
     var saveFile = function(data, filename){
    //这个地址我也不知道有什么用
    //(属于XML方法)createElementNS() 方法可创建带有指定命名空间的元素节点。
    //此方法可返回一个 Element 对象。
        var save_link = document.createElementNS('http://www.w3.org/1999/xhtml', 'a');
        save_link.href = data;
        save_link.download = filename;
//MouseEvents 貌似为固定值
//CreateEvent是一个Windows API函数。它用来创建或打开一个命名的或无名的事件对象
        var event = document.createEvent('MouseEvents');
        event.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
        save_link.dispatchEvent(event);
    };
     var filename = (new Date()).getTime() + '.' + 'jpg';
     saveFile(imgUrl,filename);
 });