img保存 vue_vue项目vue页面内容生成图片并保存本地方案

使用html2canvas插件

1、安装：

npm install --save html2canvas

2、在需要使用的vue组件中引入：

import html2canvas from "html2canvas"

3、将制定区域内转成图片

添加ref标记

/**

* 将页面指定节点内容转为图片

* 1.拿到想要转换为图片的内容节点DOM；

* 2.转换，拿到转换后的canvas

* 3.转换为图片*/clickGeneratePicture() {//生成图片

html2canvas(this.$refs.imageDom).then(canvas =>{//转成图片，生成图片地址

this.imgUrl = canvas.toDataURL("image/png"); //可将 canvas 转为 base64 格式

});

}

4、创建隐藏的可下载链接  --- 必须同源(访问的网站域名与服务器域名一致)才能下载

var eleLink = document.createElement("a");

eleLink.href= this.imgUrl; //转换后的图片地址

eleLink.download = "历史曲线图";

document.body.appendChild(eleLink);//触发点击

eleLink.click();//然后移除

document.body.removeChild(eleLink);

5、不同源下载问题

downloadIamge(imgsrc,