0

Thanks for your time. We sell many 3D printing products in MANY colors, as a result we have to create a PNG (or JPG) image file for each fricking color we offer, therefore if we have 10 products on 10 colors it means 100 PNG images files we have to export.

My question is: is there any way to change the color of the image on the fly in the client side? For instance, if the user choose one color then the object changes its color without loading a new img-file

is SVG file created for that purpose? (am I telling something stupid? :P)

Usually each image is just one color with shades of gray, example:

enter image description here

lito
  • 3,105
  • 11
  • 43
  • 71
  • If they're created as SVG I believe you have the option to change the colors if you load them as such. As images you're extremely limited. The closest thing that fits is the new css3 filter property but support is limited and it's not exactly what you're looking for. http://css-tricks.com/almanac/properties/f/filter/ – Christopher Marshall Oct 07 '14 at 21:21
  • Thanks @ChristopherMarshall , do you know what is the SVG option you are talking about? or do maybe an example? thanks! – lito Oct 07 '14 at 21:31
  • 1
    Something like this? http://www.algosome.com/articles/drawing-javascript-graphics-svg.html – Robert Longson Oct 07 '14 at 21:37

4 Answers4

3

Remove the color from the image leaving a transparency. When use the color on the background on the HTML element of the image wrapper so that it can blend in with the image.

GramThanos
  • 3,572
  • 1
  • 22
  • 34
  • That's a super interesting idea. Wouldn't the background wrapper need to fit the image edges though? e.g. be the shape of the image/product. – Christopher Marshall Oct 07 '14 at 21:49
  • No if your product have white (or any other color) on the actual image background – GramThanos Oct 07 '14 at 21:54
  • Oh! so just the product itself is transparent with white edges! Great idea! – Christopher Marshall Oct 07 '14 at 21:55
  • css3 filters should be able to do that! Greyscale/opacity combination. Wouldn't be perfect, but possibly better than creating all those images. But the final result should still be super close to what the actual product will be so I wonder. – Christopher Marshall Oct 07 '14 at 21:57
  • There's also a shortcut in Photoshop that would greyscale the image easily since they'd need at least one reference anyway. – Christopher Marshall Oct 07 '14 at 22:01
  • You can get the blue colored product and convert the blue color to transparent as well. – GramThanos Oct 07 '14 at 22:05
  • Thanks guys, I do use html5 canvas, so the other answer fits my needs, but thanks for your time :) and I think is a good also as well using the transparency ;) – lito Oct 07 '14 at 22:15
2

If all images are monochrome, you can draw the white version of the image on canvas and alter the pixel colours by multiplying with the desired colour (e.g., (1.0, 0.0, 0.0) for red).

Some example filters: http://www.html5rocks.com/en/tutorials/canvas/imagefilters/

You do need html5 / canvas support though for this to work, so it depends on the use case.

Turiphro
  • 357
  • 1
  • 3
  • 11
  • Thanks @Turiphro, I think this is the way I go. Here is exactly what I need: http://www.w3schools.com/tags/tryit.asp?filename=tryhtml5_canvas_getimagedata2 – lito Oct 07 '14 at 22:19
1

Consider using some server-side code. I would manipulate the images with asp.net/c# (php or the language of your choice) and then call it on the client with a jquery ajax call.

Server-side languages can manipulate images easily. Maybe this post can help you: How to manipulate images at the pixel level in C#

Community
  • 1
  • 1
King Clauber
  • 39
  • 10
  • Attempting to persuade the OP to use a different approach than he has *explicitly* stated he wishes to use would probably be better suited as a comment on the question, seeing as "use server-side code" is not an *answer* to "how can I do this using client-side code?" – Spooky Oct 07 '14 at 22:02
  • 1
    That's really one of the most consistent ways to do it in their defense. Browser based color changing is super fickle. – Christopher Marshall Oct 07 '14 at 22:03
  • I respect your thoughts, but my answer was based on what the big sites and e-commerces do all over internet. Changing the color on client side will probably bring him cross-browser problems. In addition you can't actually "change the color" on client-side. As you need to manipulate the bits to do that – King Clauber Oct 07 '14 at 22:08
  • Nonetheless, that does not make it a valid answer to the question. Furthermore, with regards to cross-browser issues, that is precisely the reason why developers gracefully degradation or progressively enhance content. The OP may very well have already figured out the server-side implementation, and could be looking for an **enhanced** approach for visitors whose browsers are sufficiently capable. – Spooky Oct 07 '14 at 22:16
  • No problem. I'm happy that he found a solution. Hope my answer (even if it's wrong) help other people across internet. Best regards – King Clauber Oct 09 '14 at 20:35
0

I found my answer and I made a jsfiddle Demo:

http://jsfiddle.net/pys565at/

I used the layer option from library http://filtrr.me/ that changes monochrome images using canvas HTML5 (it does NOT! use WebGl, what is nice).

Filtrr2("#myImageID", function () {
    // Create a duplicate of the image
    var dup = this.dup();
    dup.fill(0, 128, 55); // change image to green
    this.contrast(100)
    .saturate(-100) // bw
    .layer("overlay", dup) // use this layer
    .render();
});

enter image description here

lito
  • 3,105
  • 11
  • 43
  • 71