前言
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