vue h5 保存图片到手机本地相册的方法

效果图

1、插件和上传接口

import html2canvas from 'html2canvas'
import { upload } from '@/api/accept'复制

2、结构

<button @click='generateImage'>生成</button>
 
<!-- 中间信息展示 -->
      <div class="sevenInfo textLeft" id="target-element">
        <div class="name">{{ info ? info.auserName : '天翼爱音乐科技有限公司' }}</div>
        
        <div class="congratulation">
          <img src="@/assets/images/annualReport/congratulation.png" alt="" />
          <span>{{month.currentDate}}</span>
          <img class="mon" :src="imageSource" alt="" />
        </div>
        <div class="number">
          <div class="title">{{month.currentDate}}月商务视频彩铃播放成绩:</div>
 
          <div v-if="!tag" class="items">
            <div class="item">
              <span>观看人数{{ YearData6.watch_uv }}人</span>
            </div>
            <div class="item">
              <span>人员遍布城市{{ YearData6.city }}个</span>
            </div>
            <div class="item">
              <span>播放次数{{ YearData6.all_pv }}次</span>
            </div>
            <div class="item">
              <span>播放时长{{ YearData6.total_duration }}秒</span>
            </div>
          </div>
          <div v-else class="items">
            <div class="item">
              <span>观看人数1716人</span>
            </div>
            <div class="item">
              <span>人员遍布城市229个</span>
            </div>
            <div class="item">
              <span>播放次数2297次</span>
            </div>
            <div class="item">
              <span>播放时长29,443秒</span>
            </div>
          </div>
        </div>
        <div class="comeItem">
          <span>{{month.currentDate+1}}</span>
          <img class="come" src="@/assets/images/annualReport/come.png" alt="" />
        </div>
      </div>
 
  generateImage() {
      this.$toast('生成海报后长按分享')
      let that = this
      setTimeout(function () {
        console.log("执行");
        
        const element = document.getElementById('target-element') // 替换为目标元素的id或class
        html2canvas(element,{backgroundColor: '#0e0e0e'}).then(canvas => {
 
          const image = canvas.toDataURL('image/png')
          scale: 5
          dpi: 600, console.log('image', image)
          let url = that.dataURLtoBlob(image)
          console.log('url', url)
          that.videoFile(url)
        })
      }, 2000) 
    },
 
// 将base64转成blob 为了后续能上传
    dataURLtoBlob(dataurl) {
      var arr = dataurl.split(',')
      //注意base64的最后面中括号和引号是不转译的
      var _arr = arr[1].substring(0, arr[1].length - 2)
      var mime = arr[0].match(/:(.*?);/)[1],
        bstr = atob(_arr),
        n = bstr.length,
        u8arr = new Uint8Array(n)
      while (n--) {
        u8arr[n] = bstr.charCodeAt(n)
      }
      return new Blob([u8arr], {
        type: mime
      })
    },
// 上传图片
    videoFile(file) {
      let params = new window.FormData()
      let fileOfBlob = new File([file], new Date().getTime() + '.jpg')
      params.append('file', fileOfBlob)
 
      upload(params).then(res => {
        console.log('上传结果', res)
        if (res.success) {
          this.url = res.data.url
          this.savePic(res.data.url)
        }
      })
    },复制