uni-app canvas创建画布

canvasTmp: function(arr2, store_name, successFn, errFun) {
		let that = this;
		const ctx = uni.createCanvasContext('myCanvas');
		ctx.clearRect(0, 0, 0, 0);
		/**
		 * 只能获取合法域名下的图片信息,本地调试无法获取
		 * 
		 */
		uni.getImageInfo({			
			src: arr2[0],
			success: function(res) {
				const WIDTH = res.width*0.71;
				const HEIGHT = res.height*1.04;
				// const WIDTH = 320;
				//  const HEIGHT = 450;
				let r = 70;
				let d = r * 2;
				let cx = 85;
				let cy = 110;
				ctx.drawImage(arr2[1], 0, 0, WIDTH, HEIGHT); // 小图
				ctx.save();
				ctx.arc(cx + r, cy + r, r, 0, 2 * Math.PI);
				ctx.drawImage(arr2[0], cx, cy, d, d); // 背景
				ctx.restore();
				const CONTENT_ROW_LENGTH = 40;
				let [contentLeng, contentArray, contentRows] = that.textByteLength(store_name, CONTENT_ROW_LENGTH);
				if (contentRows > 2) {
					contentRows = 2;
					let textArray = contentArray.slice(0, 2);
					textArray[textArray.length - 1] += '……';
					contentArray = textArray;
				}
				ctx.setTextAlign('center');
				ctx.setFontSize(26); // 文字
				ctx.setFillStyle('#000000');
				let contentHh = 26 * 1.3;
				for (let m = 0; m < contentArray.length; m++) {
					ctx.fillText(contentArray[m], 156, 430 + contentHh * m);
				}
				ctx.setTextAlign('left')
				ctx.setFontSize(28);
				ctx.setFillStyle('#FFFFFF');
				ctx.draw(true, function() {
					uni.canvasToTempFilePath({
						canvasId: 'myCanvas',
						fileType: 'png',
						destWidth: WIDTH,
						destHeight: HEIGHT,
						success: function(res) {
							uni.hideLoading();
							successFn && successFn(res.tempFilePath);
						},
						fail: function(err) {
							uni.hideLoading();
							errFun && errFun(err);
						}
					})
				});
			},
			fail: function(err) {
				uni.hideLoading();
				that.Tips({
					title: '无法获取图片信息'
				});
				errFun && errFun(err);
			}
		})
	},

调用 : 

async spreadMsg(image ,name, title) {
				let that = this
				/** #ifndef H5   type: 'h5',   #endif  #ifdef MP || APP || APP-PLUS  #endif*/
				let rqData = {
					type: 'routine'
				}
				that.spreadData = [that.bgurl[that.type]]
				that.nickName = name
				that.siteName = title
			
				let codeUrl = ""
				// #ifdef MP || APP-PLUS
				let mpUrl = await that.downloadFilestoreImage(image)
				// #endif
				uni.showLoading({
					title: '海报生成中',
					mask: true
				});
				 // 本来这个是个循环 也就是出现多个海报 去除了
				let arr2
				// #ifdef MP || APP-PLUS	
				arr2 = [mpUrl, await that.downloadFilestoreImage(that.bgurl[that.type])]
				// #endif
				// #ifdef H5
				let img = await that.imgToBase(that.bgurl[that.type])
				arr2 = [await that.imgToBase(image), img]			
				// #endif
				that.$util.canvasTmp(arr2, name, (tempFilePath) => {
					that.$set(that.posterImage, 0, tempFilePath);
				}, (err) => {
					that.$set(that, 'canvasStatus', false);
				});
				uni.hideLoading();
			},

that.$util.PosterCanvasMer(arr2, name, (tempFilePath) => {
                    that.$set(that.posterImage, 0, tempFilePath);
                }, (err) => {
                    that.$set(that, 'canvasStatus', false);
                });

  • 8
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值