分享海报在浏览器中显示,安卓可以正常显示。苹果手机海报上面有一段空白,感觉图片好像有一个margin-top:50px。
改之后代码
1.template中内容
<img class="avatar_pic" :src="dataImg" @load="imgLoad" @click="sevenss" alt/> <div class="qrcodeposter_wrap" style="position: fixed; top: -999px; 405px; height: 720px;" id="canvasPosterActual"> <div class="title" style="top: 49px; font-size: 24px; line-height: 24px;font-weight: 600;"> {{ posterContent }}</div> <div class="code" style="top: 313px; font-size: 18px; font-family: Alibaba-PuHuiTi-Medium,serif"> 邀请码:{{ userInfo.inviteCode }}</div> <img class="avatar_pic" :src="avatarImg" @load="imgLoad" alt/> <img :src="QCode()" class="codeImg" style="top: 400px" width="50%" height="25%"/> </div>
2.引入插件
import QRCode from 'qrcode' // 邀请链接生成二维码 import html2canvas from 'html2canvas' //canvas组件
3.data中内容
data () { return { avatarImg: require('../../assets/img/poster.png'), dataImg: '', //生成的 base64 图片 urlPre: document.location.origin + '/#/register?code=', userInfo: {}, isIOS: false, maxWidth: '50px', urlCode: '' } },
4.创建海报 最开始canvas 创建的图片很模糊,后面加上dpi就清晰了很多。 dpi是清晰度,数值越大图片越清晰
createPoster () { const poster = document.getElementById('canvasPosterActual') html2canvas(poster, { dpi: 1000, // 清晰度 backgroundColor: '#fff', useCORS: true, scale: 2, async: true }).then((canvas) => { this.dataImg = canvas.toDataURL('image/j }) }, imgLoad () { // img @load事件在图片加载完成后立即执行 this.createPoster() },
5.链接生成二维码
// wx 二维码 QCode () { let dpr = window.devicePixelRatio let w = 0 try { w = document.getElementById('canvasPosterActual').offsetWidth } catch (e) { console.log(e) w = window.innerWidth - 50 } let windowWidth = window.innerWidth - 200 let maxWidth = windowWidth if (w * dpr < windowWidth) { maxWidth = w * dpr } this.maxWidth = maxWidth let urlCode = '' QRCode.toDataURL(this.urlPre + this.userInfo.inviteCode, { maxWidth, height: maxWidth, margin: 1 }, (err, url) => { urlCode = url if (err) console.log({ 'err': err }) }) return urlCode }
5.保存图片,h5中手机浏览器是长按保存图片 这里是APP里点击保存图片
sevenss () { /* eslint-disable */ //app 保存图片 浏览器中可以长按保存图片 if(window.plus){ //检查是否是APP环境 let base64 = this.dataImg // base64 图片 // 保存到本地 const bitmap = new plus.nativeObj.Bitmap('test') bitmap.loadBase64Data(base64, function () { const url = '_doc/' + new Date().getTime() + '.png' // url为时间戳命名方式 bitmap.save(url, { overwrite: true // 是否覆盖 // quality: 'quality' // 图片清晰度 }, (i) => { plus.gallery.save(i.target, function (d) { // 销毁Bitmap图片 bitmap.clear() alert('保存图片成功') }, function (e) { // 销毁Bitmap图片 bitmap.clear() alert('保存到系统相册失败,请尝试重新保存或截图保存') }) }, function () { alert('保存失败,请尝试重新保存或截图保存') }) }) } /* eslint-disable */ },