downloadImages: function (path, context, p) {
const that = this;
const ob = path.split('Url')[0];
return new Promise((resolve, reject) => {
wx.downloadFile({
url: String(this.data[path]),
success(res) {
context.drawImage(res.tempFilePath, that.data[ob].x, that.data[ob].y, p, p);
context.draw(true, () => {
resolve();
});
},
fail(error) {
console.log(error);
reject(error);
}
});
});
},
saveImage: function () {
this.getCanvas().then(async () => {
const context = wx.createCanvasContext('myCanvas');
context.width = this.data.canvasWidth;
context.height = this.data.canvasHeight;
context.setFillStyle('white');
context.fillRect(0, 0, 600, 700);
async function getSystemInfoAsync(context) {
return new Promise((resolve, reject) => {
wx.getSystemInfo({
success: (res) => {
var rpx = 150;
var px = rpx * (res.windowWidth / 750);
context.setData({
imgSize: px,
});
resolve();
},
fail: (error) => {
reject(error);
}
});
});
}
await getSystemInfoAsync(this);
const p = this.data.imgSize
const that = this;
console.log("sss");
if (this.data.faceUrl) {
await this.downloadImages('faceUrl', context, p);
}
if (this.data.eyeUrl) {
await this.downloadImages('eyeUrl', context, p);
}
if (this.data.eyebrowUrl) {
await this.downloadImages('eyebrowUrl', context, p);
}
if (this.data.mouthUrl) {
await this.downloadImages('mouthUrl', context, p);
}
if (this.data.gestureUrl) {
await this.downloadImages('gestureUrl', context, p);
}
if (this.data.footUrl) {
await this.downloadImages('footUrl', context, p);
}
if (this.data.decorateUrl) {
await this.downloadImages('decorateUrl', context, p);
}
console.log("aaa");
context.draw(true, function () {
console.log("bbb")
wx.canvasToTempFilePath({
canvasId: 'myCanvas',
success: function (res) {
wx.saveImageToPhotosAlbum({
filePath: res.tempFilePath,
success: function () {
wx.showToast({
title: '保存成功',
icon: 'success',
duration: 2000
});
},
fail: function (error) {
console.error('保存失败', error);
}
});
context.clearRect(0, 0, that.data.canvasWidth, that.data.canvasHeight);
context.draw();
},
fail: function (error) {
console.error('canvasToTempFilePath 失败', error);
}
});
});
})
},
配置合法域名
需要配置downloadFile合法域名https://developers.weixin.qq.com/miniprogram/dev/api/network/download/wx.downloadFile.html
你试下体验版
因为真机测试的canvas 时常有点问题