vue页面canvas保存为图片并保存到本地

// 保存
    saveFile(data, filename) {
      const save_link = document.createElementNS('http://www.w3.org/1999/xhtml', 'a');
      save_link.href = data;
      save_link.download = filename;

      const 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);
    },
// 生成图片
    clickGeneratePicture() {
      html2canvas(document.querySelector("#capture")).then(canvas => {
        // 转成图片，生成图片地址
        this.imgUrl = canvas.toDataURL("image/png");
        this.saveFile(this.imgUrl, new Date().toLocaleString())
        console.log(this.imgUrl);
        this.firstFlag = false;
      });
    },

<div v-show="firstFlag" id="capture">
            <div class="sharecontent">
               要生成图片的内容
            </div>
        </div>
        <img :src="imgUrl" alt="" v-show="!firstFlag">
        <span slot="footer" class="dialog-footer">
            <el-button @click="clickGeneratePicture">下载海报</el-button>
            <el-button  @click="">下载二维码</el-button>
          </span>

 

 

 

__EOF__

本文作者：皮军旗
本文链接：https://www.cnblogs.com/pijunqi/p/14378756.html
关于博主：评论和私信会在第一时间回复。或者直接私信我。
版权声明：本博客所有文章除特别声明外，均采用 BY-NC-SA 许可协议。转载请注明出处！
声援博主：如果您觉得文章对您有帮助，可以点击文章右下角【推荐】一下。您的鼓励是博主的最大动力！