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>

 

 

 

原地址:保存為圖片