1

私は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などのメソッドを使用して、あるキャンバスから別のキャンバスにコンテンツを転送しようとしましたが、透明度は維持されていました。だから私はそれがライブラリか私のコードのどちらかだと信じています。

4

1 に答える 1

0

png以外の画像形式を使用していると思います。圧縮形式ではなく、ピクセルの透明度を含むすべてのピクセルのすべての詳細を保持するPNG形式の画像を使用する必要があります。したがって、画像エディタで画像を編集した後、画像をpng形式で保持し、結果を.pngとして保存してみてください。

于 2012-10-11T14:09:21.000 に答える