vue实现图片保存到本地 / 截图

下载插件：

npm install html2canvas filesaver --save

引用：

import html2canvas from "html2canvas";

使用方法：

//屏幕截图、保存图片到相册
handleExport() {
      let htmlDom = document.getElementById("long"); // 你要截图的元素  可直接是img
      var FileSaver = require("file-saver");
      this.$nextTick(function () {
        html2canvas(htmlDom, {
          scale: 1,
          x: htmlDom.offsetLeft, //传入x和y长度，拒绝空白图片
          y: htmlDom.offsetTop,
          allowTaint: false, //允许污染
          taintTest: true, //在渲染前测试图片
          useCORS: true, //使用跨域(当allowTaint为true时这段代码没什么用)
          background: "#fff",
        }).then((canvas) => {
         // getBase64Image（imgurl）
          if (navigator.msSaveBlob) {
            navigator.msSaveBlob(canvas.msToBlob(), "demo.png");
          } else {
            canvas.toBlob(function (blob) {
              FileSaver.saveAs(blob, "demo.png");
            });
          }
        });
      });
},

还有一点要说明下，再使用微信的头像的时候生成的图片老是会把头像丢失，其他服务器的图片都可以，尼玛就是想不通，后来就先转成base64放到img标签里面生成图片，就解决了这个问题；

 function getBase64Image(imgurl) {
 	var img = new Image();
 	img.src = imgurl;
 	img.setAttribute('crossOrigin', 'anonymous');
 	img.οnlοad=function(){
 	     var canvas = document.createElement("canvas");
 	     canvas.width = 300;//这个设置不能丢，否者会成为canvas默认的300*150的大小
 	     canvas.height = 300;//这个设置不能丢，否者会成为canvas默认的300*150的大小
	    var ctx = canvas.getContext("2d");
	    ctx.drawImage(img, 0, 0, 300, 300);
	    var dataURL = canvas.toDataURL("image/png"，1);  //  参数一 ：图片格式  参数二：图片质量（0-1），超出会默认0.92
	    console.log(dataURL)
	    $("#img").attr("src",dataURL); //  让图片url等于base64转换之后的地址
	    html2img();
 	}
}