【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实现二维码分享图合成(支持单张或多张)的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。