帆布drawImage性能不佳

大家好，我的情況我有一個大的目的地畫布和一個小的屏幕外畫布。帆布drawImage性能不佳

屏幕之一在100x100以下，而目的地是5000x5000。當我調用drawImage將較小的畫布複製到目標畫布時，我會產生巨大的內存峯值，並且性能很糟糕。

我試圖將較小的畫布轉換爲圖像，這使得性能在實際使用中變得更快。唯一的問題是，圖像需要時間來加載，所以當onload被調用時，我的畫布上下文發生了變化。 --- exif數據也可能被忽略，這將解釋圖像的不同方向。

有沒有辦法剝離畫布上下文屬性，以便我可以保存並重置onload中的所有上下文屬性？

我試圖做object.keys但它總是返回一個空數組。我想我剩下的唯一方法就是直接在目的地上畫畫，而不是在屏幕外。它似乎更快，但我需要重做所有的計算。

有沒有其他的選擇我可以嘗試做？

謝謝！

下面的渲染函數每秒調用幾次。

fabObject._render = function(ctx) { 
    var canvas = document.createElement('canvas'); 
    canvas.width = 100; 
    canvas.height = 100; 
    var ctx2 = canvas.getContext('2d'); 
    myDrawFn() //this function draws to the new canvas. Performance is the same with this function commented or uncommented 
    ctx.drawImage(ctx2, 0,0)// This line causes performance to be terrible. I tried converting ctx2 to an image first and passing it in but the onload places the image in the wrong orientation. I'm guessing its not using the exif data. 

}

更新：我也試圖做每像素fillRect同時這也是快了很多。但是，當我應用陰影屬性時，它變得非常慢。我假設這是由於陰影具有高像素密度，但我不確定。

所以我做了進一步的測試，實際上是使用逐像素方法繪製時造成速度變慢的陰影模糊。沒有模糊，有一個陰影很快。

來源

2017-03-01 user6728767

你不應該得到這個內存尖峯開始。這裏可能有問題。你能分享一個[MCVE]重現這個問題嗎？ drawImage是在另一個畫布上自然且最優化的方式。 – Kaiido

所以我評論了整個功能。我只留下用document.createElement（'canvas'）創建第二個畫布。然後我設置它的大小並直接調用drawImage（）。即使沒有任何其他繪圖函數被調用，將空畫布複製到目標畫布上的速度也非常慢。 – user6728767

可以顯示您的代碼的工作示例？在你的問題中，你可以添加一個工作片段。或者有一些在線服務，如[jsfiddle]（https://jsfiddle.net）。 – Kaiido

這個問題似乎是從重複使用相同的屏幕外畫布。如果我每次都像上面的示例那樣在新畫布上調用drawImage。似乎沒有內存泄漏或放緩。爲什麼在drawImage中使用相同的屏幕外畫布會導致內存泄漏？

來源

2017-03-07 01:59:57 user6728767

帆布drawImage性能不佳

回答

相關問題