私の場合は誰もが私は大きな宛先キャンバスと小さなオフスクリーンのキャンバスを持っています。キャンバスdrawImageの悪い性能
オフスクリーンは100x100未満ですが、デスティネーションは5000x5000です。 drawImageを呼び出して小さなキャンバスをコピー先のキャンバスにコピーすると、大きなメモリスパイクが発生し、パフォーマンスがひどくなります。
小さなキャンバスをイメージに変換しようとしましたが、実際に使用できる場所ではパフォーマンスが大幅に向上しました。この問題の唯一の問題は、オンロードがキャンバス・コンテキストと呼ばれるときに画像をロードする必要があることです。 --- exifデータも無視され、画像の向きの違いを説明します。
オンロードのすべてのコンテキストプロパティを保存してリセットできるように、キャンバスコンテキストからプロパティを削除する方法はありますか？
私はobject.keysを実行しようとしましたが、常に空の配列を返します。私は自分の唯一のアプローチは、オフスクリーンではなく目的地に直接描画することだと思います。それは速いようですが、私はすべての計算をやり直す必要があります。
他にもやりたいことはありますか？
ありがとうございます！
以下のレンダリング機能は、1秒に数回と呼ばれます。
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をやってみました、これは多くの高速化もありました。しかし、私はシャドウプロパティを適用すると、それは非常に遅くなった。私はこれが高画素密度の影に起因すると仮定していますが、わかりません。
私は、ピクセルごとの描画方法を使用すると、さらにテストを行い、実際にはシャドウブラーが遅くなっています。ぼかしがなければ、影を持つことは迅速です。
このメモリスパイクは始めるべきではありません。おそらく、ここで間違っていることがあります。問題を再現する[MCVE]を共有できますか？ drawImageは、あるキャンバスを他のキャンバスに描画する、自然で最適な方法です。 – Kaiido
私は全体の機能をコメントアウトしました。私はdocument.createElement（ 'canvas'）を使って2番目のキャンバスの作成を残しました。次に、サイズを設定してdrawImage（）を直接呼び出しました。他の描画関数を呼び出さなくても、空のキャンバスを目的のキャンバスにコピーするのは非常に遅いです。 – user6728767
コードのサンプルを表示できますか？あなたの質問では、作業スニペットを追加することができます。あるいは、[jsfiddle]（https://jsfiddle.net）のようなオンラインサービスがあります。 – Kaiido