私はoCanvas.jsを使用してアプリを設計しています。これは、画像を作成および操作できるアプリの作成をはるかに簡単にする非常に優れたキャンバスライブラリですが、画像フィルターを実装しようとしたときに問題が発生しました。
複数のレイヤーを作成できるように、透明な背景が必要です。各レイヤーは、非表示の「ステージング」キャンバスに個別に(一度に1つずつ)レンダリングされた独自の表示オブジェクトで表されます。レンダリング後すぐに、表示されているキャンバス上の前のレイヤーの上にレイヤーが描画されるため、レンダリング中に各レイヤーに異なる画像フィルターを個別に適用できます。
私が抱えている問題は、oCanvasオブジェクトのcanvasElementから画像を抽出しようとすると、結果の画像の背景が透明にならないことです。例:oCanvas.create()で処理された50x50のキャンバスがありますが、表示があります:none; (これはレンダリングキャンバスとして使用されます)およびoCanvasインスタンスのない別のキャンバス(同じ寸法)。私はこのようなことをしようとしています(擬似コード):
visibleCanvas.getContext("2d").drawImage(MyOcanvasCore.canvasElement, 0, 0);
URL = MyOcanvasCore.canvasElement.toDataURL()
また、を使用visibleCanvas
してdrawImageを実行してみましたsrc=url
。
画像は常に転送されますが、canvas.create()中にbackground: "transparent"を指定しても、背景は白になります。そのため、前のすべてのレイヤーを完全に上書きします。
何かアドバイスはありますか?私はそれを間違っていますか?従来のdrawRect、drawImageなどのメソッドを使用して、あるキャンバスから別のキャンバスにコンテンツを転送しようとしましたが、透明度は維持されていました。だから私はそれがライブラリか私のコードのどちらかだと信じています。