uniapp canvas 生成海报 小程序码 二维码

uniapp  canvas 生成超简单海报带小程序码

canvas官网链接，可以先看下官方介绍，更好理解

uniapp官网canvas介绍

一、首先自定义一个生成海报的组件 uni-xcxcanvas.vue，创建同名目录

模板文件代码：

js代码

二、使用组件 uni-xcxcanvas

 @generateImageSuccessful：组件返回结果返回到父类

MYXqOption：父类数据渲染到组件

详细代码如下：

点击下载


	
		
			
			
			
			
			
		
	

async createImage() { //生成海报
	this.isDraw = true

	this.MyXqOption= {
		codeUrl: this.qrCode,
		GoodsImage: this.postImgUrl,
		StoreHeadUrl: '',
		fillStyle: '#FFFFFF',
		money: 10,
		primaryMoney: '原价',
		Sold: 1,
		GoodsName: 'dfsdfa',
		StoreName: 'sdfad',
		SoreAddress: 'sdfa',
		SoldElementLeft: 62
    }
				
},
/** 绘制成功后的回调 - 返回一个临时路径 */
generateImageSuccessful(image) {
	// this.tempImage = image
	this.uploadBanner(image, 2)
},
uploadBanner(filePath) {
		var _this = this
		let random_name = 's' + _this.random_string(6) + '_' + new Date().getTime();
		let promise = new Promise(function(resolve, reject) {
			getOssParams().then((response) => {
				uni.getFileInfo({
					filePath: filePath,
					success: res => {
						uni.uploadFile({
							url: 'https://阿里云图片存储域名',
							filePath: filePath,
							name: 'file',
							formData: {
								name: filePath,
								key: random_name,
								policy: response.policy,
								signature: response.signature,
								OSSAccessKeyId: response.accessid,
								success_action_status: '200'
							},
							success: res => {
								_this.tempImage =
									'https://阿里云图片存储域名' +
									random_name
							},
							fail: uploadFileRes => {
								reject(uploadFileRes);
							},
							complete: () => {
	
							}
						});
					},
					fail: uploadFileRes => {
	
						reject(uploadFileRes);
					}
	
				});
			}).catch(err => {
	
			})
		});
	},
//获取随机字符
    random_string(len) {
		len = len || 32;
		var chars = 'ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz2345678';
		var maxPos = chars.length;
		var pwd = '';
		for (let i = 0; i < len; i++) {
			pwd += chars.charAt(Math.floor(Math.random() * maxPos));
		}
		return pwd;
	},

生成海报如下图：一个背景图、一个小程序太阳码