vue使用html2canvas.js生成图片并保存

普通js项目使用方法

1. 引入js文件

<script type="text/javascript" src="http://html2canvas.hertzen.com/dist/html2canvas.js"></script>

1…1. 脚手架

npm install  html2canvas --save

3. 通过ref获取你要渲染的元素节点
   
   4.在你的方法事件触发

    async  Screenshot() {
        var saveFile = function(data, filename){
              var save_link = document.createElementNS('http://www.w3.org/1999/xhtml', 'a');
              save_link.href = data;
              save_link.download = filename;

              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);
          }
    html2canvas(document.getElementById("main"), {
        backgroundColor: null,
        useCORS: true, // 允许图片跨域
        taintTest: true, // 在渲染前测试图片
        timeout:1000 // 加载延时
      }).then(canvas => {
        var dataURL = canvas.toDataURL("image/png");
 saveFile(dataURL,'test.jpg');;
      });

    },

5. 效果图
   
   项目图片所以打码严重请谅解