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

});

相关推荐
彭亚川Allen2 分钟前
985 在职研究生到底怎么样?是不是水硕?是不是.....?
前端·后端·程序员
YufJi5 分钟前
两棵树,两个线程:一个小程序引擎的架构拆解
前端
super_Omni14 分钟前
Chrome 插件入驻实战:从 Manifest V3 到过审上架的完整路径
大数据·前端·chrome
CHB16 分钟前
别再问uni-app x蒸汽模式是否成熟了,已经有大量App案例上架应用商店了
uni-app
腾讯数据架构师31 分钟前
任务跑完怎么直接出图表?CubeStudio 任务可视化 ECharts 数据格式实操(CSV/JSON + metric.json,11 种图表一键渲染)
前端·json·echarts·数据可视化
小小小米粒37 分钟前
不是在构造方法「之前」修饰 Bean、注入;是构造方法跑完之后,才做属性注入,再跑 @PostConstruct。
前端
小李科技1 小时前
【性能优化】事件委托:目标定位与 React/Vue 实战
前端·vue.js·react.js·面试·性能优化·前端框架
QianhangQianping1 小时前
一块大屏的数据在浏览器里怎么变成画面:背景、子屏、前景三层结构
前端·低代码·架构·编辑器·数据可视化·大屏可视化
梦想很大很大1 小时前
让 Codex 自由发挥,给 nvm-desktop 换个 UI
前端·人工智能·设计
蓝莓味的口香糖1 小时前
【VUE】【CSS】Vue移动端适配主流方案总结
前端·css·vue.js