1.安装
npm install --save html2canvas
2.引入
import html2canvas from 'html2canvas'
3.写方法
方式一:通过<a>标签,当然这种方式 不适用 于手机端。
<div class="save_btn" @click="savecanvas">
保存图片
</div>
//导出
savecanvas() {
html2canvas(document.body, { //document.getElementById("qrcode")
backgroundColor: null
}).then(canvas => {
var imgData = canvas.toDataURL("image/jpeg");
this.fileDownload(imgData);
});
},
//下载图片
fileDownload(downloadUrl) {
let aLink = document.createElement("a");
aLink.style.display = "none";
aLink.href = downloadUrl;
aLink.download = "我的专属图片.png";
// 触发点击-然后移除
document.body.appendChild(aLink);
aLink.click();
document.body.removeChild(aLink);
}
方式二:适用于手机端,在html中创建<img :src="imgUrl">标签 ,然后生成base64格式的图片,赋给imgUrl即可
<template>
<div>
<div ref="imageWrapper">
........
</div>
<button @click="toImage">生成图片,生成后长按保存</button>
</div>
</template>
toImage() {
let that=this
html2canvas(this.$refs.imageWrapper, {backgroundColor: 'white'}).then((canvas) => {
let dataURL = canvas.toDataURL("image/jpeg");
that.imgUrl= dataURL
});
}