dcsimg
www.webdeveloper.com
Results 1 to 2 of 2

Thread: How to apply colour tint with canvas + apply to css class

  1. #1
    Join Date
    Mar 2012
    Posts
    1

    How to apply colour tint with canvas + apply to css class

    I am building a site that will have hundreds of product images. The product images will all be a square .png with a different logo "cut out" (transparent) of each one. Each image is made in illustrator, saved for the web and placed in the site.

    Each one of these images are customisable, by the customer, in colour. I am achieving this at the moment with the use of <select> drop downs and jQuery (The background colour of the image changes, depending on what option is selected, making it look like the logo colour has changed).

    My problem is that if I decide to change the colour of the solid colour of the image at any time along the way and I have already created all of these images in illustrator, this is going to be an extremely tedious task to complete. So I tried to solve this problem.

    I have nearly found the solution - I used PaintBrushJS's "Tint" function and that seemed to change the colour of the solid colour and ignore the transparent area, which is good, but is there a way to do this in a more wide spread way?

    Is PaintBrushJS the best way to do this? How would I do it without it?

    Is it possible to create a css class (or something similar) and apply it to every product image so I can change the colour at a later date and it will work site wide?

  2. #2
    Join Date
    Feb 2011
    Location
    Chuluota, Florida
    Posts
    144
    Could you post some code for it now and maybe a working example of what you have so far so that we may take a look at it and see if there is a better route to go?

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles