All geek questions in one place

How to colorize a PNG image, cross browser using jQuery

I am trying to do the same as in this question , but simpler: I have a PNG image with white and transparent color. I need to colorize the white part without touching the transparent part, in this hexadecimal RGB value.

I would like to do this with the jQuery plugin. Is there anything that can be done?

It should work in the latest versions of all major browsers (IE, FF, GC, Safari), with bonuses to support the lower version.

Usage example

enter image description hereenter image description hereenter image description here

Things I found / thought already:

  • Pixastic , but it does not support cross browser.
  • CamanJS , but this is not for jQuery
  • Overlaying on another div, for example here , but this will harm the transparent parts.
  • Make the white parts transparent and vice versa, and then use the background color - but the images are uploaded by the user, and this will not make it more convenient
+4
source share
1 answer

How about using SVG? SVG is supported in all major browsers with IE 9. In a text format, it is small, lightweight and easy to manipulate.

A quick and dirty approach is to use SVG-edit (online) or Inkscape (download) to create your drawing, and then just drop the resulting <svg> element into your HTML page. Here is a fiddle showing how this might work: http://jsfiddle.net/t6fAb/

Even better, use SVG.js to completely create a drawing in JavaScript. Here is a fiddle showing how this might work: http://jsfiddle.net/WEL4J/

+4
source

Source: https://habr.com/ru/post/1486580/

More articles:


All Articles