canvas节点无法导出图片_利用canvas将网页元素生成图片并保存在本地

利用canvas将网页元素生成图片并保存在本地,首先引入三个文件：

>

>

>

//canvas截图为document.body上的元素

html2canvas(document.body).then(function (canvas) ｛

canvas.setAttribute('id','canvasImg'); //给canvas添加id

// document.body.Child(canvas)

document.getElementById('images').Child(canvas) //添加canvas图给元素

｝);

let Download=document.getElementById('Download');

Download.=function () ｛ //给下载节点绑定事件

let oCanvas=document.getElementById('canvasImg'); //获取canvas的id

console.log(oCanvas)

// 将canvas图片通过Canvas2Image转成的img元素引入的图片

let img=Canvas2Image.saveAsJPEG(oCanvas,true).getAttribute('src');

console.log(img);

saveFile(img,'hlr.png') //调用下载函数，传Canvas2Image图片地址，下载时保存的图片的名称

｝;

注：NS() 方法可创建带有指定命名空间的元素节点。 NS(ns,name) > NS() 方法与 () 方法相似，只是它创建的 Element > 节点除了具有指定的名称外， > 还具有指定的命名空间。只有使用命名空间的 XML 文档才会使用该方法。

let saveFile=function (data,filename) ｛

let save_link=document.NS('http://www.w3.org/1999/xhtml','a'); //img表示生成img元素或a元素或则可以放图片地址的元素

save_link.href=data; //img 元素中图片引入用src，a元素中图片的引入用href等等

save_link.download=filename; // 下载的名称

var event = document.createEvent('MouseEvents');//创建event事件

console.log(event);

//initMouseEvent 方法用于初始化通过 DocumentEvent 接口创建的 MouseEvent 的值, 详见下文：

event.initMouseEvent('click', true, false, , 0, 0, 0, 0, 0, false, false, false, false, 0, null);

save_link.dispatchEvent(event);

console.log(save_link)//

素材公社https://www.wode007.com/sites/73209.html 爱图网https://www.wode007.com/sites/73208.html

initMouseEvent 方法用于初始化通过 DocumentEvent 接口创建的 MouseEvent 的值。 此方法只能在通过 dispatchEvent 方法指派 MouseEvent 之前调用，尽管在该阶段可以多次调用它(如有必要)。如果被多次调用，则最后一次调用优先。

其他指定事件方法：

typeArg - 指定事件类型。

canBubbleArg - 指定该事件是否可以 bubble。

cancelableArg - 指定是否可以阻止事件的默认操作

viewArg - 指定 Event 的 AbstractView。

detailArg - 指定 Event 的鼠标单击量。

screenXArg - 指定 Event 的屏幕 x 坐标

screenYArg - 指定 Event 的屏幕 y 坐标

clientXArg - 指定 Event 的客户机 x 坐标

clientYArg - 指定 Event 的客户机 y 坐标

ctrlKeyArg - 指定是否在 Event 期间按下 control 键

altKeyArg - 指定是否在 Event 期间按下 alt 键。

shiftKeyArg - 指定是否在 Event 期间按下 shift 键。

metaKeyArg - 指定是否在 Event 期间按下 meta 键。

Arg - 指定 Event 的鼠标按键。

relatedTargetArg - 指定 Event 的相关 EventTarget。