【uni-app】App实现二维码分享图合成(支持单张或多张)

【uni-app】App实现二维码分享图合成

写在前面, 该文章目前仅支持合成特定数量的分享图, 不支持随意数量分享图合成

一. 背景

app内实现一个邀请拉新功能, 需要根据每个用户生成各自的二维码, 并且把二维码合成到海报, 生成3张海报, 用户三选一进行分享. 今天我们只说其中一个功能实现 ---- 合成多张二维码分享图

二. 功能实现

*** 生成单张二维码分享图

单张可以参考这位博主内容 : https://dandelioncloud.cn/article/details/1419298504186597377/

*** 生成单张二维码分享图

在上面单张的基础上, 我做了改动, 实现特定数量分享图的生成

前提 : 安装插件 – https://ext.dcloud.net.cn/plugin?id=2434

模板

<button type="default" @click="beginCanvasBatch">开始批量合成</button><button style="margin-top: 50rpx;" @click="save(0)">保存图片1</button>
<button style="margin-top: 50rpx;" @click="save(1)">保存图片2</button>
<button style="margin-top: 50rpx;" @click="save(2)">保存图片3</button>// 生成后的图片列表
<view v-for="(itemImg, index) in finallyImgList" :key="index + 'img'"><image :src="itemImg" mode="widthFix"></image></view>// 具体作用不清楚, 组件实际不在界面展示出来, 估计只是为了生成图片的一个占位
// 这里用不了v-for循环,所以只能固定合成的数量, 也可能是我方式错误, 如果可以告知, 这样写着实不太优雅
<mosowe-canvas-image ref="mosoweCanvasComponents0" @canvasImage="_canvasImage0" :lists="imageList[0]" height="426" width="296" /><mosowe-canvas-image ref="mosoweCanvasComponents1" @canvasImage="_canvasImage1" :lists="imageList[1]" height="426" width="296" /><mosowe-canvas-image ref="mosoweCanvasComponents2" @canvasImage="_canvasImage2" :lists="imageList[2]" height="426" width="296" />

script

<script>
import mosoweCanvasImage from '@/components/mosowe-canvas-image/mosowe-canvas-image';
export default {comments: {mosoweCanvasImage},data() {return {finallyImgList: [], // 合成后的图片listimageList: [], // 整合的未合成的图片listlogoImage: {type: 'image',content: 'http://xxx.jpg',width: 15,height: 15,x: 42,y: 352,arc: false,arcX: 0,arcY: 0,arcR: 0}, // logo};},computed: {qrImage() {var userInfo = getApp().globalData.global_user;          var id = userInfo.id return {type: 'qr',content: `https://xxx?id=${id}`,text: '这是一个二维码',width: 60,height: 60,x: 20,y: 330,arc: false,arcX: 0,arcY: 0,arcR: 0}; // 二维码}},methods: {// 开始生成beginCanvasBatch() {let this_ = this;var area;this.imageList.map((item, i) => {setTimeout(function() {area = 'mosoweCanvasComponents' + i;this_.$refs[area].createCanvas();}, 2000 * i);});},_canvasImage0(e) {this.finallyImgList = [];console.log('图片0', e);this.finallyImgList.push(e);},_canvasImage1(e) {console.log('图片1', e);this.finallyImgList.push(e);},_canvasImage2(e) {console.log('图片2', e);this.finallyImgList.push(e);},formatImageList() {this.imageList = [[{type: 'image',content: 'https://xxx.jpg',width: 296,height: 426,x: 0,y: 0},this.qrImage,this.logoImage],[{type: 'image',content:'http://xxx.jpg',width: 296,height: 426,x: 0,y: 0},this.qrImage,this.logoImage],[{type: 'image',content:'http://xxx.jpg',width: 296,height: 426,x: 0,y: 0},this.qrImage,this.logoImage]];},save(i) {let url = this.finallyImgList[i];uni.saveImageToPhotosAlbum({filePath: url,success: () => {uni.hideLoading();uni.showToast({title: '图片已保存'});},fail: () => {uni.hideLoading();uni.showToast({title: '图片保存失败'});}});},},onLoad() {this.formatImageList();}
};
</script>

三. 效果

底图+二维码+logo

【uni-app】App实现二维码分享图合成(支持单张或多张)相关推荐

jquery.qrcode生成带logo的二维码，同时生成带二维码的好友分享图片（js与canvas实现二维码和图片合成的海报）
首先给大家看一下效果图(纯jQuery前端技术): 提供一下demo 源代码和jquery.qrcode文件下载: https://download.csdn.net/download/qq15577 ...
uniapp中H5网页和打包app分别生成二维码
一.h5网页中生成二维码业务引入"qrcodejs2.js":npm install qrcodejs2: <template><view><vie ...
安卓app和苹果app共用一个二维码
应项目要求,现在安卓app和苹果app共用一个二维码,对外提供下载: <html><head><meta http-equiv="Content-Type&qu ...
小程序之保存canvas生成商品图片附加小程序二维码分享到朋友圈
小程序之保存canvas生成商品图片附加小程序二维码分享到朋友圈一.概述需要用到的生成二维码组件(可自行下载添加到小程序根目录utils里):https://github.com/demi52 ...
uni-app微信小程序扫普通二维码分享小程序
这里需要扫普通二维码分享的话就需要先产生二维码了文档:https://github.com/yingye/weapp-qrcode 1.绘制二维码我这里使用的是资源是weapp.qrcode.es ...
怎么将在线视频做成二维码分享？二维码分享视频怎么操作？
现在很多人都会将视频转二维码图片后,分享给他人扫码查看,极大的提升了信息传递的便捷性,那么视频生成二维码的操作方法大家都知道吗?下面就让小编给大家分享一款二维码制作工具,支持多种二维码生成功能,一键即 ...
如何利用二维码分享会议资料
iamlaosong文在当今智能手机普及年代,完全可以利用手机接收会议资料.当然方式有很多种,电子邮件.QQ群共享等都可以.这儿说一个将资料存放到云盘,再利用二维码分享的方式.这种方式方便,迅速,无 ...
通过web系统实现淘宝营销引流，小说或者视频上传之后自动生成二维码，通过二维码分享之后引入微信或者扣扣加群，群满自动切换到下一个，以及数据统计分析和若干个小工具集成
通过web系统实现淘宝营销引流,小说或者视频上传之后自动生成二维码,通过二维码分享之后引入微信或者扣扣加群,群满自动切换到下一个,以及数据统计分析和若干个小工具集成. 主要实现技术: 1.大文件视频分 ...
二维码生成器和二维码分享
<html> <head><title>二维码生成器-</title> </head> <meta name="viewpo ...

【uni-app】App实现二维码分享图合成(支持单张或多张)

【uni-app】App实现二维码分享图合成

一. 背景

二. 功能实现

*** 生成单张二维码分享图

*** 生成单张二维码分享图

模板

script

三. 效果

【uni-app】App实现二维码分享图合成(支持单张或多张)相关推荐

最新文章

热门文章