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);

});

相关推荐
llz_1121 小时前
web-第二次课后作业
前端·后端·web
vipbic6 小时前
别再把“做个H5”挂嘴边了:这个词,官方压根就没有定义过
前端
ZC跨境爬虫8 小时前
跟着 MDN 学CSS day_39:(Flexbox 弹性盒子核心机制)
前端·css·ui·html·tensorflow
小陈同学呦8 小时前
前端如何处理订单状态导航的数据竞态问题
前端·javascript
开发者每周简报8 小时前
网海三部曲·无名宗师传
javascript·人工智能
喵个咪8 小时前
GoWind Toolkit 前端代码生成|Vue3(ElementPlus/Vben)、React(AntDesign)全自动一键生成教程
前端·vue.js·react.js
摆烂大大王10 小时前
玩转 OpenClaw:用 TaskFlow + Heartbeat 打造自动化工作流
前端·人工智能·自动化
zhangxingchao10 小时前
AI 大模型核心六:量化、Workflow 与 Agent、多轮 RAG
前端·人工智能·后端
梦想的颜色10 小时前
TypeScript 完全指南(上):从零开始掌握类型系统
前端·typescript
之歆10 小时前
Day01_ES6+ 专业指南:从基础到实战的现代JavaScript开发(下)
前端·javascript·es6