Доступ на уровне пикселей с Pixastic и RaphaelJS
Я работаю над редактором изображений, и мне нужно создать некоторые методы манипуляции с пикселями, применяемые к изображениям 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 ответа
В настоящее время нет простого способа сделать это. Как уже упоминалось, во многих браузерах вы можете выводить данные в Canvas, а затем выполнять преобразования на уровне пикселей, но этот переход от SVG к Canvas является разрушительным, поскольку вы перешли из контекста с сохраненным режимом в контекст с непосредственным режимом, и поэтому вы потерять все тонкости API сохраненного режима, такие как возможность регистрации прослушивателей событий для отдельных фигур или иметь высокоуровневый API для преобразования отдельных фигур (или групп фигур).
Однако, если вам не нужна обработка событий на уровне элементов, вы можете заглянуть в библиотеку dojox.gfx, которая предоставляет высокоуровневый API-интерфейс с поддержкой режима SVG для рисования фигур, но также имеет бэкэнд Canvas. (VML и Silverlight тоже). Я считаю, что при использовании вывода Canvas невозможно зарегистрировать прослушиватели событий для отдельных фигур, но вы сможете зарегистрировать обработчик событий в корневом элементе canvas. Затем можно применить преобразования с Pixtastic, но вам может понадобиться немного взломать код рендеринга Canvas dojox.gfx.
Вы также можете взглянуть на фильтры SVG, которые настолько близки к собственной поддержке растровых графических манипуляций на уровне пикселей, насколько это возможно в SVG.
Я также считаю, что в настоящее время они пытаются объединить две спецификации, чтобы сделать такую работу возможной: http://lists.w3.org/Archives/Public/public-canvas-api/2011AprJun/0117.html
Вы можете попробовать нарисовать svg для проверки элемента canvas в конце этой статьи https://developer.mozilla.org/en/drawing_graphics_with_canvas. Затем выводят холст на базу 64 закодированного изображения. Не работая ни с RaphaelJS, ни с Pixastic, я не уверен, насколько хорошо это будет работать.