vue项目 base64转换为图片并下载

需要运用到html2canvas

首先安装

npm i html2canvas --save

再引用
import html2canvas from "html2canvas"

下面附上代码

 

 

 template代码：

        <img
          id="2canvas"
          style="width: 100%;"
          mode="widthFix"
          :src="selectItem.sigimg"
          alt=""
        >
        <div slot="footer">
          <el-button
            type="primary"
            @click="handleDownloadqrCode"
          >下载图片</el-button>
        </div>

js代码：

import html2canvas from 'html2canvas'


methods:{
    handleDownloadqrCode() {
      html2canvas(document.getElementById('2canvas')).then((canvas) => {
        var pageData = canvas.toDataURL('image/png', 1.0) // 第二个参数可以调节下载图片的清晰度
        const link = document.createElement('a') // 创建一个a标签
        link.style.display = 'none' // 去掉此标签的所有样式避免展示出a标签
        link.href = pageData // 把获取到的流文件放到href属性里
        link.setAttribute('download', this.selectItem.name + '.png') // 调用download属性，并添加名字
        document.body.appendChild(link) // 添加这个a标签到body上
        link.click() // 触发click事件
      })
    },
}