記錄uniapp 生成二維碼海報并保存到本地或者分享給微信好友

–

前言

最近又遇到一個需求：用戶需要將小程序生成的二維碼海報分享給微信好友或者保存到本地，最后實現(xiàn)的效果如下：

一、引入生成二維碼的組件

這種網(wǎng)上隨便找一下就有了，樓主采用的是tki-qrcode 生成二維碼組件，具體的鏈接如下：
鏈接: https://blog.csdn.net/qq_45829293/article/details/123169952

二、點擊右側(cè)的分享圖標(biāo)生成海報

因為考慮到到時候生成的海報要分享，所以考慮用canvas的方式去繪制海報，當(dāng)然你也可以試著用傳統(tǒng)的 寫法去生成，這邊樓主沒有去嘗試過，所以這個方法也就不說了，只說canvas 的方式

核心生成代碼如下（示例）：

	//初始化畫布
			async __init() {
				uni.showLoading({
					title: '加載中...',
					mask: true
				})
				this.ctx = uni.createCanvasContext('my-canvas', this)
				this.canvasW = uni.upx2px(500);
				this.canvasH = uni.upx2px(750);
				//設(shè)置畫布背景透明
				this.ctx.setFillStyle('rgba(255, 255, 255, 0)')
				//設(shè)置畫布大小
				this.ctx.fillRect(0, 0, this.canvasW, this.canvasH)
				//繪制圓角背景
				this.drawRoundRect(this.ctx, 0, 0, this.canvasW, this.canvasH, uni.upx2px(18), '#FFFFFF')
				//小程序碼
				// let qrcodeImg = await this.getImageInfo(this.qrcode)
				// this.ctx.drawImage(qrcodeImg.path,198,(((this.canvasW-hW) / 2) + hH + 135), 92, 92)
				//獲取二維碼的圖片
				let headerImg = await this.getImageInfo(this.src)
				let hW = uni.upx2px(500);
				let hW1 = uni.upx2px(300);
				let hH = uni.upx2px(300);
				//繪制標(biāo)題圖
				 this.drawRoundImg(this.ctx, headerImg.path, uni.upx2px(100), hH / 4, hW1, hH, 8)
				//繪制提示
				this.ctx.setFontSize(14);
				this.ctx.textAlign = 'center' //文字居中 設(shè)置文字居中但是fillText的第二個參數(shù)必須為畫布寬度一半
				this.ctx.setFillStyle('#A4A4A4');
				let sWidth = this.ctx.measureText(this.subTitle).width
				this.ctx.fillText(this.subTitle, this.canvasW / 2, (
					((this.canvasW - hW) / 2) + hH + 70))
				this.ctx.setFontSize(12);
				this.ctx.fillText(this.subTitle1, this.canvasW / 2, (
					((this.canvasW - hW) / 2) + hH + 90))
				//繪制虛線
				this.drawDashLine(this.ctx, 10, (((this.canvasW - hW) / 2) + hH + 120), (this.canvasW - 10), (((this
					.canvasW - hW) / 2) + hH + 120), 5)
				//左邊實心圓
				this.drawEmptyRound(this.ctx, 0, (((this.canvasW - hW) / 2) + hH + 120), 10)
				//右邊實心圓
				this.drawEmptyRound(this.ctx, this.canvasW, (((this.canvasW - hW) / 2) + hH + 120), 10)
				//提示文案
				this.ctx.setFontSize(12);
				this.ctx.setFillStyle('#858585');
				//底部廣告
				let BottomAdImg = await this.getImageInfo(this.abImg)
				// 判斷一下手機系統(tǒng)的寬高
				uni.getSystemInfo({
					success: (res) => {
						if (res.windowHeight <= 568) {
							this.ctx.drawImage(BottomAdImg.path, uni.upx2px(20), (((this.canvasW - hW) /
								2) + hH + 140), uni.upx2px(460), (this.canvasH - hH) / 4)
						} else {
							this.ctx.drawImage(BottomAdImg.path, uni.upx2px(20), (((this.canvasW - hW) /
								2) + hH + 140), uni.upx2px(460), (this.canvasH - hH) / 3)
						}
					}
				});

三：將canvas 圖片轉(zhuǎn)化成圖片（最關(guān)鍵）

這一步是最關(guān)鍵的，只有這一步完成了，才能夠?qū)崿F(xiàn)分享給用戶或者保存下來

代碼如下：

this.ctx.draw(true, () => {
						// 將canvas 變成圖片方便發(fā)送給好友或者保存
						var that = this
						uni.canvasToTempFilePath({
							canvasId: 'my-canvas',
							fileType: 'jpg',
							x: 0,
							y: 0,
							complete: (res) => {
								this.canvasImg = res.tempFilePath
							}
						}, this);
					})

四：保存圖片或者發(fā)送好友

這里采用了微信原生的方式，在img 標(biāo)簽上加上 show-menu-by-longpress=true 就可以了。文章來源地址http://www.zghlxwxcb.cn/news/detail-407543.html

最后

如需項目demo，請聯(lián)系我：1015095073@qq.com

到了這里，關(guān)于uniapp 實現(xiàn)生成海報并分享給微信好友和保存到本地相冊的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！