Конвертировать SVG в canvas, с поддержкой mix-blend-mode?

Question

[beDenz]

Здравствуйте!
Подскажите, вариант как можно сконвертировать html код svg и изображение в canvas, что бы сохранялось свойство mix-blend-mode: multiply. Пробовал разные библиотеки, ни одна как требуется не заработала.
Код для примера https://jsfiddle.net/bedenz/xsfu40yd/

Comments

[Kovalsky]

https://stackoverflow.com/questions/3768565/drawin... ?
bl.ocks.org/biovisualize/8187844 ?
https://jsfiddle.net/Wijmo5/h2L3gw88/ ?

[beDenz]

Спасибо, но не в одном из вариантов не работает mix-blend-mode.

Answer 1

[RAX7]

Comments

[Kovalsky]

Я понимаю что технически это решение, но теперь вот интересно возможно ли автоматическое определение всех таких факторов, которые потенциально могут мешать конвертации из svg в канву

[RAX7]

Kovalsky, не обязательно svg конвертировать полностью, его также можно вставить как картинку в канвас, а перед отрисовкой этой картинки включить globalCompositeOperation = 'multiply'

// рисуем фото
ctx.drawImage(img, 0, 0);

// рисуем svg
ctx.globalCompositeOperation = 'multiply';
ctx.drawImage(svg, 0, 0);

[Kovalsky]

RAX7, не, я это понял, я имею в виду интересно есть ли еще подобные механизмы влияющие на картинку и можно ли их все учесть, или проигнорировать выбрав другой способ

[RAX7]

механизмы влияющие на картинку

о каких механизмах идет речь?

[Kovalsky]

RAX7, ну вот есть режим наложения цвета. Я уверен есть еще какие-нибудь подобные факторы которые могут помешать конвертации 1 в 1.

[beDenz]

А что если мне нужно сконвертировать большой svg слой, с разными группами path, у каждой свой fill?
Я думал взять весь элемент и вставить в drawImage, но но тут ругается, что я подсовываю не SVGImageElement.

[RAX7]

Kovalsky, режимы наложения не мешают конвертации, на канвасе можно сделать режимы которых даже нет в css. Все зависит от того, что ты хочешь получить. Можешь посмотреть на библиотеку html2canvas и какие css свойства в ней еще не реализованы.

[RAX7]

beDenz, лучше кодом покажи, что и куда ты подсовываешь.

[beDenz]

RAX7, https://jsfiddle.net/bedenz/xsfu40yd/2/

[beDenz]

RAX7, html2canvas не поддерживает mix-blend-mode свойство

[RAX7]

beDenz,

[beDenz]

Спасибо! А если передавать svg не по ссылке? А html элементом?

[RAX7]

beDenz, ну тогда придется сначала из svg сделать dataUri https://habr.com/ru/post/254973/ , dataUri использовать как src для новой картинки и эту картинку уже рисовать на канвасе в нужном режиме наложения

[beDenz]

RAX7, опытным путем выяснилось, что в firefox не работает