【經驗】微信小程序 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

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章