主要问题是海报制作的时候,使用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();
},
你好,请问使用原生小程序开发有这个问题吗?