微信小程序canvas 生成海报的一些坑

微信小程序canvas 生成海报的 一些坑

我们公司目前在把支付宝小程序转换成微信小程序,虽然都是小程序,但是开发时还是有很多地方不一样,踩了一些坑.

不能设置display:none;

canvas生成海报的时候,在支付宝小程序里面,我喜欢把canvas标签隐藏调,这样不占用页面空间.
但是在微信里面不能这样设置,不然就会报错,如下图
(模拟器不报错,真机调试报错)

所以为了隐藏掉canvas标签所占位置,可以通过position定位实现的

.canvas {
	position: absolute;
	top: -9999px;
	left: -9999px;
}

这样就解决了

ctx.drawImage 网络图片

使用ctx.drawImage绘制图片的时候,本地图片是ok的,微信小程序不支持网络图片,所以要把网络图片转成本地图片
我本地解决代码

//判断有没有网络图片,有的话调用微信提供的api.没有使用本地路径默认图片
				if (data && data.portrait) {
						wx.getImageInfo({
							src: data.portrait,
							success: res => {
								console.log(`缓存地址：${res.path}`);
								//这里把图片存到data里面,之后drawImage的时候,都是用this.data.teamImg就可以了
								this.setData({
									teamImg: res.path
								});

							},
							fail: res => {
								console.log(`缓存失败：${res.errMsg}`);
								this.setData({
									teamImg: '../static/images/default_avatar.png'
								});
							}
						})
					} else {
						this.setData({
							teamImg: '../static/images/default_avatar.png'
						});
					}

之后就可以使用 ctx.drawImage方法绘制图片了
微信小程序开发文档

生成海报的时候,有时候真机预览的时候网络图片没有渲染成功,使用微信小程序的api wx.getImageInfo(Object object)的时候报错
getImageinfo:fail download image fail. reason:downloadFile :url not in domain list
这是因为没有先配置download域名造成的
解决方式 :配置download域名