效果图

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 = thissetTimeout(function () {console.log("执行");const element = document.getElementById('target-element') // 替换为目标元素的id或classhtml2canvas(element,{backgroundColor: '#0e0e0e'}).then(canvas => {const image = canvas.toDataURL('image/png')scale: 5dpi: 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.urlthis.savePic(res.data.url)}})},