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?
Related
I'm trying to see if possible at all, to have the image attached change an image on the side when hovering over 1,2,3...
This means there are several parts changing the side image to another image each time. My biggest question is, is it possible to do this without cutting the image into multiple parts and keeping it as a single image with multiple hover points?
Yes it is. Very old style but you can create a so called areamap. Sample Page in German Use google chrome to translate the explanation.
But in your case its cheaper to create tabel and hover the cells ;) CSS background-image is your friend.
I don't really know what im searching for even after googling all sorts and wondered if someone could put me in the right direction.
Lets base this example on a car frame.
I would like to have one image of a car frame which allows to have multiple colours (Hex), so when a user selects black, the main car colour is black but the shape/frame of the car remains with the same image, selecting red would change the colour but would keep the same frame image.
The reason why i would like to have one image is, because there could be 50-60 cars all with around 20-30 different colours. So uploading that many images would consume a lot of disk space over time.
Any components/frameworks i could use with an ASP net project?
Either client side Html and Javascript:
You could do this efficiently by creating a partially transparent image I guess. Then change the background color of the element below the image using script. It depends on the type of picture and quality of the output if this is an option for you.
A better approach would be to change the color of pixels directly. Look for Html5 canvas pixel manipulation or use this link: Pixel manipulation with canvas. Scroll down to the Grayscale sample to start with.
Or server side C#:
Use image filters/direct pixel manipulation. Look for "Pixel Manipulation in C#" to find the right libs and API for your project and framework e.g. WriteableBitmapEx. More choices here: .NET Core Image Processing.
This is the image: .
You know how the progress bars work, like if you give it the value of 50, and then later use javascript to change it with transition, it will be smooth, and eventually the progress bar will be filled.
Now, you see the white portion in the image?
Say, there is a field called Votes. Based on the value of Votes, a same amount of color should be filled inside the coffee image. (Replacing equal amount of white.)
Yes, I can develop hundred images, and do it in Photoshop, which is pretty lame.
There is a thing called keyframes, and there are animations, but I am not able to findna way to animate this using css.
I have seen it on Behance, and it is like a very common thing. The crazy thing is, I cant find it on Google.
In simple words, based on the amount of votes, the white portion should be replaced by equal amount of some other color.
Like this: Codepen.io: Image Filling progress
Turn the image into a transparent png, and have a colored div behind the image change height based on the number of votes.
I'm wondering how to remove a color in an image on a webpage. I want some kind of result like explained here...
An image with three segments: blue, purple, and red. I want to filter out all the blue so it ends up with the segments: black, red, and red.
blue purple red -> black red red
I know this would be done in CSS or JavaScript in some way but I do not know how I would do it. I've been messing with CSS filters and even putting a div on top of it that is a certain color, but nothing will get rid of the blue.
Does anyone know how to do this / is it possible?
You could try using CSS filters however, i don't think there is a filter for a specific colour and browser compatibility is limited.
https://developer.mozilla.org/en/docs/Web/CSS/filter
Alternatively you could use an SVG image which allows you to modify certain parts of an image using CSS however i think SVG files can get pretty big for large images...
I think you can use adobe illustrator to save files as SVG.
http://www.w3schools.com/svg/tryit.asp?filename=trysvg_myfirst
Slightly more complicated, but far more compatible - load the image into a canvas, and then use getImageData within it, filter out whichever colours you don't want, then paste it back again.
It's not a quick (framerate) process - getImageData is a really slow function so an HD screen won't hit 60fps on anything except the most powerful machine. Saying that, if you're not trying to animate it then it's perfect ;-)
This one is not trivial. I want to create a chroma key menu. For those not familiar, it is the same in video with the green background (or whatever color) being removed and special background is added.
I have images as a background in a menu. What I want is to set in someway the section where the background is transparent and the rest being filled with a color. In the example below, the background of the menu is image. Can we have such a background without one?
I am interested in unified solutions, not ones using css3.
I'm happy to be proven wrong, but I'm fairly sure the answer is no, not even with CSS3. Maybe using IE's very advanced filter()s but those aren't cross-browser.
Using a transparent channel for the background is the only way to go. It won't be trivial, but you could use a server-side script to change a specific colour into the transparent colour.
ImageMagick should be able to do this. Here's a promising example.
However, these examples are for replacing one colour. Whether it's possible to make this look good for anti-aliased edges (where the "transparent" colour blends into the surface colour, creating a mixture that the program would have to detect), I don't know.
If at all possible, use proper transparency from the start.
I imagine this would be possible on the client-side by copying the image into a <canvas> rendering context, processing the image data (like ImageMagick does) then outputting a data uri which you can use as the CSS background-image of your menu.
For reference see:
http://www.hmp.is.it/creating-chroma-key-effect-html5-canvas/
http://www.html5canvastutorials.com/advanced/html5-canvas-get-image-data-url/