vue 生成海报完整代码, (包括远程图片转base64、html2canvas 在IOS系统兼容的解决办法)

最终效果：

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 = thisvar image = new Image()image.crossOrigin = 'Anonymous' // 注意这个属性一定要在src之前, 否则ios无法成功转base64image.src = imgimage.onload = function(){var canvas = document.createElement('canvas')canvas.width = image.widthcanvas.height = image.heightvar ctx = canvas.getContext('2d')ctx.drawImage(image, 0, 0, image.width, image.height)let base64 = canvas.toDataURL('image/png')document.getElementById(id).src = base64setTimeout(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) 首先被执行. 原因不明...

vue 生成海报完整代码, (包括远程图片转base64、html2canvas 在IOS系统兼容的解决办法)相关推荐

智慧车行预约小程序，汽车保养、维修、美容、检测预测小程序，前后端完整代码包括车行动态，养车常识，保养预约，维修预约，洗车美容预约
功能介绍智慧车行小程序,是一个专门为洗车/4S/车辆维修行业打造的小程序,前后端完整代码包括车行动态,养车常识,保养预约,维修预约,洗车美容预约,汽车检测预约等功能,采用腾讯提供的小程序云开发解决方 ...
校园社团微信小程序，基于腾讯小程序云开发，后端完整代码包括社团通知，社团简介，社团福利，社团章程，社团招新，社团活动报名预约等
功能介绍校园社团小程序,前后端完整代码包括社团通知,社团简介,社团福利,社团章程,社团招新,社团活动报名预约等功能,采用腾讯提供的小程序云开发解决方案,无须服务器和域名预约管理:开始/截止时间/人 ...
微信小程序 - 本地图片临时路径转base64 和远程图片转base64
本地临时图片路径转base64 base64({url,type}){return new Promise((resolve, reject) => {wx.getFileSystemManag ...
win8 远程桌面时提示凭证不工作问题的终极解决办法
原文 win8 远程桌面时提示凭证不工作问题的终极解决办法环境说明远程办公电脑(放置于公司.自用办公电脑.win8系统) 远程连接客户机(放置于家中.家庭日常所用.win8系统) 故障现象最近在 ...
几个常用的CSS3样式代码以及不兼容的解决办法
几个常用的CSS3样式代码以及不兼容的解决办法原文:几个常用的CSS3样式代码以及不兼容的解决办法 border-radius实现圆角效果 1 CSS3代码: 2 3 -webkit-border- ...
错误代码5 你的远程桌面会话服务器,“你的远程桌面会话已结束,可能是下列原因之一”解决办法...
"你的远程桌面会话已结束,可能是下列原因之一"解决办法如果服务器开启了远程桌面,到其他电脑却不能登录,请检查服务器一.检查服务器的防火墙,是否允许远程桌面,远程桌面的默认端口是 ...
Vue 生成海报的插件vue-canvas-poster
1.npm安装vue-canvas-poster npm i --save vue-canvas-poster 2.在mian.js中引入 important VueCanvasPoster from ...
前端生成海报图：html2canvas 生成海报图/网页html转图片
html2canvas 生成海报图 <html><head> <title>生成海报图Demo</title> </head><bod ...
vue使用html2canvas截取div内容生成海报~ vue生成海报
最近项目有需求需要把生成海报.就在网上查了一些资源记录一下. 首先就是下载依赖了.老规矩: npm i html2canvas 然后在需要的组件里面引用: import html2canvas fro ...

vue 生成海报完整代码, (包括远程图片转base64、html2canvas 在IOS系统兼容的解决办法)

vue 生成海报完整代码, (包括远程图片转base64、html2canvas 在IOS系统兼容的解决办法)相关推荐

最新文章

热门文章