最终效果:
1. html结构分为3部分:最终的海报图 + 内容布局 + 保存提示文字(可忽略)
<template>
<section>
<img :src="fullImg" v-if="fullImg" class="fullImg">
<div class="print" id="print" v-else>
<img class="photo" :src="user.photo">
<div class="name">{{user.name}}</div>
<div class="text1">自定义文字1</div>
<div class="text2">自定义文字2</div>
<div id="qrcode"><img id="qrImg" :src="user.code"></div>
</div>
<div class="end">长按海报保存到相册,分享邀请队友</div>
</section>
</template>
2. 逻辑实现思路
海报大背景图放在了本地, 直接加给 #print
头像 + 自定义文字 + 二维码 使用定位排好位置.
获取到远程二维码图片url, 转为base64 然后赋值给qrImg
image2Base64(img, id) {
let that = this
var image = new Image()
image.crossOrigin = 'Anonymous' // 注意这个属性一定要在src之前, 否则ios无法成功转base64
image.src = img
image.onload = function(){
var canvas = document.createElement('canvas')
canvas.width = image.width
canvas.height = image.height
var ctx = canvas.getContext('2d')
ctx.drawImage(image, 0, 0, image.width, image.height)
let base64 = canvas.toDataURL('image/png')
document.getElementById(id).src = base64
setTimeout(function() { // 设置定时器, 保证二维码正确显示 再生成整个海报
that.toSave()
}, 100)
}
},
3. https://github.com/FEA-Dven/html2Canvas 下载 html2canvas.js 放入本地文件夹.
// 引入
import html2canvas from "../../lib/html2canvas";
// 点击保存
toSave() {
(window.html2canvas || html2canvas)(document.getElementById('print'), {
useCORS: true //为了微信头像的跨域, 否则头像会空白
}).then((canvas) => {
this.fullImg = canvas.toDataURL('image/png')
})
},
这里需要特别注意一下!!!
(window.html2canvas || html2canvas)(document.getElementById('print'), {
如果写成下面这样:
var print = document.getElementById('print')
(window.html2canvas || html2canvas)(print, {
会报错 Uncaught TypeError: document.getElementById(...) is not a function
或者写其他代码 也同样会报错, 比如: alert('xxx') 也会报错 Uncaught TypeError: alert(...) is not a function
好像是需要保证 (window.html2canvas || html2canvas) 首先被执行. 原因不明...