利用canvas将网页元素生成图片并保存在本地

利用canvas将网页元素生成图片并保存在本地


   首先引入三个文件:
        1、<script type="text/javascript" src="js/html2canvas.js"></script> 
        2、<script type="text/javascript" src="js/base64.js"></script>
        3、<script type="text/javascript" src="js/canvas2image.js"></script>

<div style="background-color: red; width: 700px; height: 500px;">
 //canvas截图为document.body上的元素
  html2canvas(document.body).then(function (canvas) {   
      canvas.setAttribute('id','canvasImg');  //给canvas添加id
      // document.body.appendChild(canvas)
      document.getElementById('images').appendChild(canvas)   //添加canvas图给元素
  });
    let Download=document.getElementById('Download');
   Download.onclick=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图片地址,下载时保存的图片的名称
   };

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


let saveFile=function (data,filename) {
    let save_link=document.createElementNS('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, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
    save_link.dispatchEvent(event);

    console.log(save_link)// <a href=data:image/jpeg:base64.....></a>
}

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 键。
    buttonArg - 指定 Event 的鼠标按键。
    relatedTargetArg - 指定 Event 的相关 EventTarget。

在这里插入图片描述
更多内容自己去查看canvas API.

来源:看了一篇博客,实验出来的,忘了地址了,哈哈

来源:https://blog.csdn.net/qq_34171965/article/details/84956510

转载于:https://www.cnblogs.com/datiangou/p/10125360.html

你可能感兴趣的:(利用canvas将网页元素生成图片并保存在本地)