使用Pixastic和RaphaelJS進行像素級訪問

我正在使用圖像編輯器，並且必須在RaphaelJS圖像上創建一些像素操作方法。我正在考慮使用Pixastic庫進行像素操作。使用Pixastic和RaphaelJS進行像素級訪問

問題是我無法將RaphaelJS圖像鏈接到Pixastic，因爲RaphaelJS創建了一個SVG元素，Pixastic需要'img'標籤。

我已經試過這樣的事情，但沒有成功

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

來源

2011-07-25 Pasman

你檢查這一點：http://stackoverflow.com/questions/3975499/conversion-of-svg -to-jpeg/3976034＃3976034？ – Niloct

事情是我需要能夠進一步使用raphael對象進行轉換（移動，旋轉，縮放）。所以我正在尋找一個就地應用pixastic過濾器 – Pasman

目前還沒有一種簡單的方法可以做到這一點。如前所述，在許多瀏覽器中，您可以輸出到Canvas，然後執行像素級轉換，但是從SVG到Canvas的轉換具有破壞性，因爲您已經從保留模式上下文切換到即時模式上下文，因此您失去保留模式API的所有細節，例如能夠在各個形狀上註冊事件偵聽器，或者具有用於轉換各個形狀（或形狀組）的高級API。但是，如果您不需要元素級別的事件處理，則可以查看dojox.gfx庫，該庫提供了用於繪製形狀的高級保留模式，SVG啓發的API，但也有一個畫布後端（VML和Silverlight也是如此）。我相信在使用Canvas輸出時不可能在各個形狀上註冊事件偵聽器，但是您可以在根畫布元素上註冊事件處理函數。它可能可能然後應用與Pixtastic轉換，但你可能需要破解dojox.gfx畫布渲染代碼一點。

您也可以查看SVG過濾器，它與SVG獲得的像素級柵格圖形樣式操作接近。

我也相信，他們目前正在試圖將兩種規格有點相結合，使這項工作成爲可能：http://lists.w3.org/Archives/Public/public-canvas-api/2011AprJun/0117.html

來源

2011-07-26 00:39:06 jbeard4

壞我前進的項目從拉斐爾轉換。另一方面，你提到了SVG濾鏡，我需要在像素級別上進行以下操作：圖像彎曲，圖像傾斜，特定顏色去除和顏色疊加。你認爲這是可能的？ – Pasman

圖像傾斜的聲音就像它可以用變換表示。圖像彎曲可能是不可能的。使用feColorMatrix可能會去除顏色和顏色疊加。在這裏看到的文檔：http://www.w3.org/TR/SVG11/filters.html – jbeard4

請記住，跨瀏覽器支持SVG過濾器是非常糟糕的。我認爲只有FF和Opera有相當好的支持。 Chrome，Safari和IE9，最後我檢查過，不支持過濾器。 – jbeard4

你可以嘗試繪製SVG附近本文https://developer.mozilla.org/en/drawing_graphics_with_canvas結束canvas元素檢查。然後將畫布輸出到基礎64編碼圖像。沒有與RaphaelJS或pixastic合作過，我不確定這會如何工作。

來源

2011-07-25 21:32:28 qw3n

使用Pixastic和RaphaelJS進行像素級訪問

回答

相關問題