html2canvas实现将网页生成图片，自定义保存图片的名称

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
      });
    }