小程序`canvasToTempFilePath:fail:cearte bitmap failed?`

这个方法的思路来源链接: 微信开放社区,主要是通过延迟、重试、以及画质来解决手机性能等问题导致的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

  • 1
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值