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

相关推荐

  1. uni-app canvas创建画布

    2024-06-14 09:42:05       8 阅读
  2. VUE ui工程创建

    2024-06-14 09:42:05       40 阅读
  3. golang 创建unix socket http服务端

    2024-06-14 09:42:05       29 阅读
  4. 2312skia,16画布

    2024-06-14 09:42:05       30 阅读
  5. 程序员商业模式画布

    2024-06-14 09:42:05       7 阅读

最近更新

  1. TCP协议是安全的吗?

    2024-06-14 09:42:05       16 阅读
  2. 阿里云服务器执行yum,一直下载docker-ce-stable失败

    2024-06-14 09:42:05       16 阅读
  3. 【Python教程】压缩PDF文件大小

    2024-06-14 09:42:05       15 阅读
  4. 通过文章id递归查询所有评论(xml)

    2024-06-14 09:42:05       18 阅读

热门阅读

  1. 自然语言处理(NLP)教学解决方案

    2024-06-14 09:42:05       8 阅读
  2. Civil 3d中 三角网曲面求取二维和三维面积

    2024-06-14 09:42:05       9 阅读
  3. SQL 基础入门教程

    2024-06-14 09:42:05       8 阅读
  4. SqlServer 数据库挂起

    2024-06-14 09:42:05       5 阅读
  5. 揭开 Docker 容器的神秘面纱:深入理解容器原理

    2024-06-14 09:42:05       9 阅读
  6. adb简单使用命令

    2024-06-14 09:42:05       6 阅读
  7. Leetcode.2862 完全子集的最大元素和

    2024-06-14 09:42:05       6 阅读
  8. flume配置----a1.sources.r1.positionFile=xxxx.json

    2024-06-14 09:42:05       8 阅读