这个方法的思路来源链接: 微信开放社区,主要是通过延迟、重试、以及画质来解决手机性能等问题导致的canvasToImageFile故障,代码仅供参考。欢迎大家提供更多方法或思路,或指出代码异常,谢谢!
下面是我用到项目中的代码片段:
// 海报信息
POSTER_IMAGE_INFO: {
// 海报的宽
width: 0,
// 海报的高
height: 0,
// 展示海报时的路径
posterUrl: null
}
// 绘制最终展示海报时的错误次数
var canvasToImageFileError = 1;
// 绘制最终展示海报时的延时
var canvasToImageFileDelayTime = 200;
// 绘制最终展示海报时的画质
var canvasToImageFileQuality = 1;
function canvasToImageFile(_this) {
return new Promise(async (resolve, reject) => {
setTimeout(() => {
uni.showToast({
mask: true,
icon: 'none',
title: '第' + canvasToImageFileError + '次输出绘制'
});
//把当前画布指定区域的内容导出生成指定大小的图片,并返回文件路径。在自定义组件下,第二个参数传入自定义组件实例,以操作组件内 <canvas> 组件。
uni.canvasToTempFilePath({
x: 0,
y: 0,
width: _this.POSTER_IMAGE_INFO.width,
height: _this.POSTER_IMAGE_INFO.height,
// 画布的ID
canvasId: 'CANVAS_ID',
fileType: 'jpg',
quality: canvasToImageFileQuality,
success: function(res) {
console.info('[canvasToImageFile]√生成海报成功,尝试次数:' + canvasToImageFileError + ',延迟:' +
canvasToImageFileDelayTime + ',画质:' + canvasToImageFileQuality, res);
console.info('[canvasToImageFile]', res.tempFilePath);
_this.POSTER_IMAGE_INFO.posterUrl = res.tempFilePath;
resolve('生成海报成功');
},
fail(e) {
if (canvasToImageFileError <= 5) {
// 错误次数+1
canvasToImageFileError += 1;
// 延迟+100
canvasToImageFileDelayTime += 100;
// 画质减去0.1
canvasToImageFileQuality -= 0.1;
canvasToImageFile(_this);
} else {
console.error('[canvasToImageFile]×生成海报失败,尝试次数:' + canvasToImageFileError + ',延迟:' +
canvasToImageFileDelayTime + ',画质:' + canvasToImageFileQuality, e);
reject(JSON.stringify(e));
}
}
}, _this);
}, canvasToImageFileDelayTime);
})
}
}
再补一下调用吧,我怕有些小伙伴不知道怎么调用
canvasToImageFile(_this).then(function(res) {
uni.showLoading({
mask: true,
title: '输出绘制完成'
});
}).catch(function(e) {
uni.showModal({
title: '生成错误',
content: JSON.stringify(e)
})
})
参考资料:promise