uniapp开发微信小程序生成二维码海报-Toy模板网

这篇具有很好参考价值的文章主要介绍了uniapp开发微信小程序生成二维码海报。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

<template>
<view>
<button @click="open"></button>
<view class="canvasPop" v-if="canvasPopBool" style="z-index: 9999999;">
//关闭按钮
			<uni-icons class="close" type="close" size="30" @click="canvasPopBool=false"></uni-icons>
//uniapp自带的组件  canvas-id是组件的标识符  画布组件
			<canvas canvas-id="firstCanvas" id="firstCanvas"></canvas>
			<view class="btn" @click="saveCanvasFn">保存图片</view>
		</view>
</view>
</template>
<script>
export default {
data():{
return{
canvasPopBool:false
}
},
methods:{
open:{
this.canvasPopBool=true
const obj={
					imgUrl: this.baseUrl + this.bannerList[0].fileUrl, //内容图片地址
					title: this.routeItem.name,//内容 标题
					str: 'money',
					price:this.routeItem.consumeAmount, //金额
				}
this.poster(obj)

},
//生成海报方法
poster(obj){
let context = uni.createCanvasContext('firstCanvas');  //获取到画布组件的唯一标识符ID
//下面两行代码获取到背景图片地址（后端返给存在了本地存储）		
let allImg = uni.getStorageSync('allImg');  
let newUrl = allImg.pic41;
//获取到到内容图片地址
		let newUrlTwo = obj.imgUrl;
		uni.showLoading({
			title: '努力加载中...',
			mask: true
		});
		uni.downloadFile({  //下载上传方法
			url: newUrl, //背景图片地址
			success(res) {
				uni.hideLoading(); //关闭uni.showLoading
//drawImage绘制图像到画布 第一个参数图片地址 0第一个是距离X轴的距离 0第二个是距离Y轴距离 275是在目标画布上绘制图像的宽度 482是在目标画布上绘制图像的高度
				context.drawImage(res.tempFilePath, 0, 0, 275, 482);

				context.font = "18px Arial";
//文字颜色
				context.fillStyle = '#333';
//测量文本尺寸信息，目前仅返回文本宽度
				const textWidth = context.measureText(obj.title).width;
				if (textWidth >= 160) {
					for (let i = 0; i < 4; i++) {
						const dataOne = obj.title.substr(i * 8, 8);
						const dataThree = 360 + (i * 20);
//在画布上绘制被填充的文本 dataOne是填充的内容  21是距离X轴的位置  dataThree距离Y轴的位置
						context.fillText(dataOne, 21, dataThree);
					}
				} else {
					context.fillText(obj.title, 21, 360);
				}
				context.font = "18px Arial";
				context.fillStyle = '#ff3400';
				if (obj.str == 'money') {
					context.fillText('￥' + obj.price, 21, 450);
				} else if (obj.str == 'jifen') {
					context.fillText(obj.price + '积分', 21, 450);
				}
				uni.downloadFile({
					url: newUrlTwo,  //内容图片
					success(res2) {
						context.drawImage(res2.tempFilePath, 21, 100, 233, 233);
						context.draw(); //开始绘制
					}
				});
			}
		});
}
//保存图片
saveCanvasFn(){
//把当前画布指定区域的内容导出生成指定大小的图片，并返回文件路径。在自定义组件下，第二个参数传入自定义组件实例，以操作组件内 <canvas> 组件。
uni.canvasToTempFilePath({
					canvasId:'firstCanvas',
					success(res){
//保存图片到相处
						uni.saveImageToPhotosAlbum({
							filePath:res.tempFilePath,
							success(){
								this.canvasPopBool = false;
								uni.showToast({
									title: '图片保存成功',
									icon: 'none'
								});
							}
						});
					}
				})}
}
}
</script>
<style>
	// 生成海报盒子样式  
	.canvasPop {
		width: 100%;
		height: 100%;
		background-color: rgba($color: #000, $alpha: 0.3);
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		position: absolute;
		left: 0;
		top: 0;

		.close {
			position: absolute;
			right: 30rpx;
			top: 30rpx;
		}

		#firstCanvas {
			width: 275px;
			height: 482px;
		}

		.btn {
			height: 60rpx;
			background-color: blue;
			border-radius: 30rpx;
			margin-top: 30rpx;
			padding: 0 30rpx;
			color: white;
			line-height: 60rpx;
		}

	}
</style>

模板： uniapp 二维码插入海报,uni-app,微信小程序,小程序文章来源地址https://www.toymoban.com/news/detail-653984.html