【移动端】vue宣传海报拼接二维码

来源需求
项目宣传海报，海报上有项目入口二维码，由于该海报的二维码是实时生成，因此不能用固定的二维码，所以才需要调用后端接口获取到对应的链接，然后转成二维码，最后拼接到海报图上，再进行展示。
功能实现
1、由于项目使用的是vue3框架，所以采用qrcode插件将链接转成二维码。文档地址
2、拼接方式则是通过canvas将上一步生成好的二维码按照指定位置绘至海报图上。canvas文档
3、通过json文件配置海报图和二维码位置。
4、支持区分海报类型。（需要在代码中约定好类型枚举值）
5、支持生成多张，使用van-swipe进行滑动切换海报。
具体代码

// 模板
<div class="banner" id="banner"><van-swipe @change="swipeChange" :loop="false" :initial-swipe="bannerIndex"><van-swipe-item v-for="(img, index) in posterImage" :key="index"><img :src="img" /></van-swipe-item></van-swipe>
</div>

// 逻辑
const route = useRoute()
const productType = route.query.posterType|| '' // 海报类型
const bannerIndex = ref(0)
const posterImage = ref([])
const swipe = ref(null)// 监听轮播图
const swipeChange = index => {bannerIndex.value = index
}// 核心方法
const canvasPoster = (imgList, code) => {const images = []const imagesOnload = []// 海报处理imgList.forEach((img, index) => {images[index] = new Image()images[index].setAttribute('crossOrigin', 'anonymous')images[index].src = img.urlimages[index].position = img.positionimagesOnload[index] = new Promise((resolve, reject) => {images[index].onload = () => resolve()images[index].onerror = () => reject()})})// 二维码处理const invitationImg = new Image()invitationImg.src = codeconst invitationOnload = new Promise((resolve, reject) => {invitationImg.onload = () => resolve()})const resList = []return Promise.all([...imagesOnload, invitationOnload]).then(res => {images.forEach(img => {const canvas = document.createElement('canvas')canvas.width = img.widthcanvas.height = img.heightconst ctx = canvas.getContext('2d')ctx.rect(0, 0, canvas.width, canvas.height)ctx.fillStyle = '#fff'ctx.fill()ctx.drawImage(img, 0, 0, canvas.width, canvas.height)ctx.fillRect(img.position[0], img.position[1], img.position[2], img.position[3])ctx.drawImage(invitationImg, img.position[0], img.position[1], img.position[2], img.position[3])const base64 = canvas.toDataURL('image/jpeg', 0.3)resList.push(base64)})return resList},err => {Toast.fail('海报生成失败')},)
}

// 页面初始化
onMounted(async () => {const data = {posterType,}// 请求配置jsonconst posterListRes = await axios.get(`配置文件路径/配置文件.json?t=${+new Date()}`,)// 请求二维码链接apiService.getQrdoceUrl({ data }).then(res => {if (res.code === '0') {const { url } = res.data// 生成二维码QRCode.toDataURL(url, (err, qrCodeData) => {if (err) Toast.fail(err)const posterList = posterListRes.datacanvasPoster(posterList[posterType], qrCodeData).then(imgList => {posterImage.value = imgList})})}})
})

// json配置示例
{"type1": [{"url": "海报链接11","position": [132, 536, 484, 484]}{"url": "海报链接12","position": [132, 536, 484, 484]}],"type1": [{"url": "海报链接21","position": [570, 1152, 138, 138]}{"url": "海报链接22","position": [570, 1152, 138, 138]}],"desc": "注: 该字段并无实际意义，主要用来在配置时用来说明配置方法，防止忘记;type1: 海报类型1,type2: 海报类型2;position:[二维码左上角X坐标，二维码左上角Y坐标，二维码宽，二维码高]"
}

【移动端】vue宣传海报拼接二维码相关推荐

使用 iview 实现PC端生成推广海报与二维码并下载的功能，基于iview Modal 对话框与 Carousel 走马灯组件实现
使用 iview 实现PC端生成推广海报与二维码并下载的功能,基于iview Modal 对话框与 Carousel 走马灯组件实现前言:最近在对公司网页进行改版的时候遇到一个问题,需要在PC端实 ...
VUE微信H5生成二维码海报保存在本地相册
VUE微信H5生成二维码海报保存在本地相册一.效果二.说明公司需求:宣传海报从后台获取,二维码地址也从后台获得,然后生成一个海报,海报上固定位置放二维码,长按图片可以保存在本地相册(其实前面的需 ...
前端Vue H5生成带二维码的分享海报，实现长按保存到手机相册
前端Vue H5生成带二维码的分享海报,实现长按保存到手机相册前言:关于H5分享海报的需求,经常会遇到,通常就是一个分享的二维码+分享文案,生成一张图片,供用户在手机上长按保存到手机,然后就可以将保 ...
魔坊APP项目-15-邀请好友（业务逻辑流程图、服务端提供邀请好友的二维码生成接口、客户端通过第三方识别微信二维码，服务端提供接口允许访问、App配置私有协议,允许第三方应用通过私有协议,唤醒APP）
邀请好友 1.业务逻辑流程图客户端提供点击"邀请好友"以后的页面frame,html/invite.html,代码: <!DOCTYPE html> <html ...
vue 根据链接生成二维码(功能实现)
今天同事问我一个问题,在vue项目中想要根据一个链接显示对应的二维码该怎么实现. 我前一段时间,有用apicloud项目生成二维码的功能,但是vue版本的没有处理过.百度后找到一个可行的方案: 大神实 ...
Android 图片合成海报生成二维码，指定文字。
一 ,图片合成,海报增加二维码,文字,或者用户ID.先看图这个是没有合成之前的图. 合成之后的图. . 使用到的技术点 1,图片Glide 2, banner2.0 3, zxing class M ...
vue使用qrcode生成二维码
vue使用qrcode生成二维码 1. 首先安装qrcode插件 npm i qrcode -S 2.引入使用 import QRCode from 'qrcode' 3.生成二维码 <temp ...
vue+qrcodejs2 动态生成二维码并下载
安装依赖 npm install --save qrcodejs2 vue页面引用 <script>import QRCode from 'qrcodejs2'import axios f ...
canvas前端生成海报、二维码、截取节点生成图片
前言在最近的项目中,有一个需求是要保存前端生成的二维码,同时需要在二维码上方显示课程名称或者活动名称,下方显示机构名称这次前端分为PC管理端和uniapp移动端 PC端计划使用qrcode生成二维 ...

【移动端】vue宣传海报拼接二维码

【移动端】vue宣传海报拼接二维码相关推荐

最新文章

热门文章