Доступ на уровне пикселей с Pixastic и RaphaelJS - PullRequest
Новая
       11

Доступ на уровне пикселей с Pixastic и RaphaelJS

1 голос
/ 26 июля 2011

Я работаю над редактором изображений, и мне нужно создать некоторые методы манипуляции с пикселями, применяемые к изображениям RaphaelJS.Я рассматриваю возможность использования библиотеки Pixastic для управления пикселями.

Проблема заключается в том, что я не могу связать изображение RaphaelJS с Pixastic, поскольку RaphaelJS создает элемент SVG, а Pixastic требует тег 'img'.пробовал что-то подобное, но безуспешно 

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

Ответы [ 2 ]

2 голосов
/ 26 июля 2011

В настоящее время нет простого способа сделать это. Как уже упоминалось, во многих браузерах вы можете выводить данные в Canvas, а затем выполнять преобразования на уровне пикселей, но этот переход от SVG к Canvas является разрушительным, поскольку вы перешли из контекста с сохраненным режимом в контекст с непосредственным режимом, и поэтому вы потерять все тонкости API сохраненного режима, такие как возможность регистрации прослушивателей событий для отдельных фигур или иметь высокоуровневый API для преобразования отдельных фигур (или групп фигур).

Однако, если вам не нужна обработка событий на уровне элементов, вы можете заглянуть в библиотеку dojox.gfx , которая предоставляет высокоуровневый API-интерфейс с поддержкой режима SVG для рисует фигуры, но также имеет бэкэнд Canvas (VML и Silverlight). Я считаю, что при использовании вывода Canvas невозможно зарегистрировать прослушиватели событий для отдельных фигур, но вы сможете зарегистрировать обработчик событий в корневом элементе canvas. может затем применяться для преобразования с Pixtastic, но вам, возможно, придется взломать код рендеринга Dojox.gfx Canvas немного.

Вы также можете взглянуть на фильтры SVG, которые настолько близки к встроенной поддержке растровых графических манипуляций на уровне пикселей, как и в SVG.

Я также считаю, что в настоящее время они пытаются объединить две спецификации, чтобы сделать такую ​​работу возможной: http://lists.w3.org/Archives/Public/public-canvas-api/2011AprJun/0117.html

1 голос
/ 26 июля 2011

Вы можете попробовать нарисовать svg для проверки элемента canvas в конце этой статьи. https://developer.mozilla.org/en/drawing_graphics_with_canvas. Затем вывести холст в кодированное изображение base 64. Не работая ни с RaphaelJS, ни с pixastic, я не уверен, насколько хорошо это будет работать.

...