2011-07-25 11 views
1

私は画像エディタで作業しています。RaphaelJS画像に適用されるいくつかのピクセル操作方法を作成する必要があります。ピクセル操作のためにPixasticライブラリを使用することを検討しています。PixasticとRaphaelJSでのピクセルレベルのアクセス

問題は、RaphaelJSがSVG要素を作成し、Pixasticに 'img'タグが必要なため、RaphaelJSイメージをPixasticにリンクできないという問題です。

私はこのような何かを試してみましたが、ノー成功

img = r.image("Assets/test.jpg", 40, 40, 260, 150); 
img.node=Pixastic.process(img.node, "desaturate"); 
+0

あなたはこのことを確認しました:http://stackoverflow.com/questions/3975499/conversion-of-svg -to-jpeg/3976034#3976034? – Niloct

+0

私はさらに、変換(移動、回転、スケール)にraphaelオブジェクトを使用できるようにする必要があります。だから私はpixasticフィルタのインプレース適用を探しています – Pasman

答えて

2

これは実際には簡単な方法ではありません。既に述べたように、多くのブラウザでCanvasに出力してからピクセルレベルの変換を実行できますが、SVGからCanvasへの移行は、保持モードのコンテキストから即時モードのコンテキストに移行すると破壊的です。個々の図形にイベントリスナーを登録できるように、または個々の図形(または図形群)を変換するための高水準APIを持つなど、保持モードAPIの細部を失います。

要素レベルのイベント処理が不要な場合は、dojox.gfxライブラリを参照してください。このライブラリは、シェイプを描画するためのハイレベルの保持モードのSVGに似たAPIを提供しますが、キャンバスバックエンド(VMLとSilverlightも)。 Canvasの出力を使用するときは、個々の図形にイベントリスナーを登録することはできないと考えられますが、ルートのcanvas要素にイベントハンドラを登録できます。その場合、の場合はPixtasticで変換を適用することが可能ですが、dojox.gfx Canvasレンダリングコードをハックする必要があります。

また、SVGで取得したピクセルレベルのラスターグラフィックススタイル操作のネイティブサポートに近いSVGフィルターを調べることもできます。

私はまた、彼らは現在、このような作業を可能にするために多少の2つの仕様を結合しようとしていると信じて:http://lists.w3.org/Archives/Public/public-canvas-api/2011AprJun/0117.html

+0

私は前進して、プロジェクトにraphaelから切り替える方法です。一方、SVGフィルタについて言及しましたが、私はピクセルレベルで次のことを行う必要があります:画像の曲がり、画像の歪み、特定の色の除去と色のオーバーレイ。あなたはそれが可能だと思いますか? – Pasman

+0

イメージは、変換で表現できるような音が歪んでいます。イメージの曲がりはおそらく不可能です。おそらくfeColorMatrixを使用して、色の除去とカラーオーバーレイが可能です。 – jbeard4

+1

SVGフィルタのクロスブラウザサポートはかなり悪いことに注意してください。私はFFとOperaだけが合理的に良いサポートを持っていると思う。最後にチェックしたChrome、Safari、IE9はフィルタをサポートしていません。 – jbeard4

1

であなたは、この記事https://developer.mozilla.org/en/drawing_graphics_with_canvasの終わり近くにcanvas要素のチェックにSVGを描画してみてください。次に、ベース64の符号化画像にキャンバスを出力する。 RaphaelJSとpixasticのどちらでも働いていないのですが、これがどれほどうまくいくかわかりません。

関連する問題