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

2023-10-30

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

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

小程序`canvasToTempFilePath:fail:cearte bitmap failed?` 的相关文章

  • 使用Sonar分析Golang代码

    为了保证项目代码质量 需要控制每个Pull Request的代码单元测试覆盖率 翻看了Sonar文档 发现Sonar是一款保证代码质量的工具 可以满足此类需求 下面就用一个Demo来体验一下Sonar的功能 安装SonarQube 以Doc
  • 学习渗透,刚刚入坑——————基础知识了解

    今天学的很少但还是写写吧 我大一咋就没觉悟提前学习 大一整整四个月的寒假就让我躺废了 简单的说说我学到的知识 渗透测试 基础知识了解一下吧 最近的瓜很多 吃的真爽 孩子真是个神奇的存在 有的人因此得到祝福 有的人直接被封杀 当然这都拖了乐坛
  • 搭建学校oj平台-后端创建比赛用户

    后端创建比赛用户 gitee仓库代码在文章尾部 Mysql新建competiton user表 create table competition user id int auto increment competition id int n

随机推荐