收藏
回答

海报制作,增加图片素材,导出的时候,安卓真机只有背景图的问题?

主要问题是海报制作的时候,使用canvas制作海报,背景图片没什么问题,ios也没问题,就真机的时候,安卓端出现保存的时候,海报上面的素材全部丢失,排查了各种情况,海报绘制异步事件的问题,保存的问题,都没找到解决方式

			this.canvasShow = true;
				let reactRes = await this.getRect('.bg-img');
				if (this.system.h < reactRes.height) {
					this.system.h = reactRes.height;
				}
				uni.showLoading({
					title: '生成海报中...'
				});
				const ctx = wx.createCanvasContext('myCanvas', this);
				ctx.draw(); //清空之前的海报
				// 根据设备屏幕大小和距离屏幕上下左右距离,及圆角绘制背景
				let dragBg = this.dragBg;
				if (this.dragBg.url) {
					this.dragBg.width = this.system.w;
					this.dragBg.height = this.system.h;
					if (!this.dragBg.cover) {
						this.dragBg.height = reactRes.height;
					}
					await drawSquarePic(ctx, dragBg.left, dragBg.top, dragBg.width, dragBg.height, dragBg.radius,
						dragBg.url, dragBg.color, dragBg.bgColor, dragBg.rotate, 0, this.system);
				} else {
					await drawSquarePic(ctx, 0, 0, this.system.w, this.system.h, 0, dragBg.url, dragBg.color, dragBg
						.bgColor);
				}
				for (let i = 0; i < this.dragList.length; i++) {
					const element = this.dragList[i];
					if (element.type === 'img' || element.type === 'shape') {
						await drawSquarePic(
							ctx,
							element.left,
							element.top,
							element.width,
							element.height,
							element.radius,
							element.url,
							element.color || element.borderColor,
							element.backgroundColor,
							element.rotate,
							element.borderWidth
						);
					}
					if (element.type === 'text') {
						console.log('creatPoster -> element', element);
						await drawTextReturnH(
							ctx,
							element.text,
							element.left,
							element.top,
							element.width,
							element.height,
							element.fontSize,
							element.color,
							element.textAlign,
							element.fontWeight,
							element.rotate
						);
					}
				}
				const systemInfo = uni.getSystemInfoSync();
				setTimeout(() => {
					uni.hideLoading();
					this.handleSaveCanvasImage(ctx);
				}, 1000);
			},
			// 海报保存
			handleSaveCanvasImage(ctx) {
				uni.showLoading({
					title: '海报保存中...'
				});
				let that = this;
				setTimeout(() => {
						uni.canvasToTempFilePath({
							x: 0,
							y: 0,
							width: that.system.w, // 画布的宽
							height: that.system.h, // 画布的高
							destWidth: that.system.w,
							destHeight: that.system.h,
							canvasId: 'myCanvas',
							success: (res) => {
								that.$emit('getImgUrl', {
									...res,
									dataSource: {
										dragBg: that.dragBg,
										dragList: that.dragList
									}
								});
								// // 上传海报
								// let {fileID} = await upload(res.tempFilePath)
								// // 存储数据
								// await add({
								// 	createTime: Date.now(),
								// 	dragBg:that.dragBg,
								// 	dragList:that.dragList,
								// 	posterImgUrl:fileID
								// })
								//保存图片至相册
								that.canvasToImgUrl = res.tempFilePath;
								uni.saveImageToPhotosAlbum({
									filePath: res.tempFilePath,
									success(res) {
										uni.showToast({
											title: '图片保存成功,可以去分享啦~',
											duration: 2000,
											icon: 'none'
										});
										// that.handleCanvasCancel();
									},
									fail() {
										uni.showToast({
											title: '保存失败,稍后再试',
											duration: 2000,
											icon: 'none'
										});


									}
								});
							},
							fail(res) {
								console.log('fail -> res', res);
								uni.showToast({
									title: '保存失败,稍后再试',
									duration: 2000,
									icon: 'none'
								});
							}
						}, this);
					},
					1000);


				uni.hideLoading();
			},	
回答关注问题邀请回答
收藏

1 个回答

  • 社区技术运营专员--许涛
    社区技术运营专员--许涛
    10-28

    你好,请问使用原生小程序开发有这个问题吗?

    10-28
    有用
    回复 1
    • 杰
      10-28
      没试过用原生的,改成新版本的canvas,就好了,问题已经解决,谢谢
      10-28
      回复
登录 后发表内容