【经验】微信小程序 canvas 图片拉伸 对 wx.canvasToTempFilePath 截图导出的影响。

前言

canvas如果图片出现了拉伸，wx.canvasToTempFilePath导出的图片会出现不可预测的奇怪不完整情况。所以咱们研究下。

 

 

接口说明

https://developers.weixin.qq.com/miniprogram/dev/api/canvas/wx.canvasToTempFilePath.html

 

 

 

 

 

 

测试用例

canvas在界面的尺寸：300，300

图片尺寸：602，397

截图坐标：0，0，150，150

 

模式 none，canvas=界面尺寸，不拉伸

 

图片没有完全显示，截图导出的图片正好是canvas 显示部分的100，150.

 

模式 scaleToFill，canvas= 图片尺寸，出现拉伸

 

截图的尺寸虽然是100x150，但是内容不是50%的画面部分，而是更长了。

已知 canvas 界面尺寸长度=300，canvas 代码尺寸长度=397

按照缩放算法，图像数据没有压缩，但是显示压缩了，所以如果宽度不变，高度150，实际上不失真的高度 = 397 * 300 / 602 = 197.840531561461794；

如果截图的是150，则，实际上实在198,300的 canvas 上进行截图。

所以如果按照显示高度 = 300，要实现截图50%，则计算出来 x = 150 / 300  * 397 * 300 / 602 = 150 * 397 / 602 = 98.920265780730897

 

这样就正确的得到显示部分的截图；

 

模式 aspectFit, canvas= 缩放后界面尺寸，图片完整显示

同样截图 100，150尺寸的图片：

 

同样可以看到没有被拉伸，正确截图。 

 

 

腾讯 BUG 发现：

如果canvas 初始化界面宽度是300，画图前调整为414，则截图输出会出错。

 

 

但是如果一开始初始化就是414，则正确：

 

 

这个问题就是导致了导出的 bug