Single image different background - javascript

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.

Related

Is there a way to change tint of selected pixels in a Sprite?

Hello dear StackOverflow's community!
This is my very first question on the site, so I hope I'll be clear enough. Also, I am a French guy and I apologize in advance for the language mistakes!
Let me explain my situation (I like to be precise so it will be a bit long) :
I am currently doing an internship in my University. Here's the topic : my teacher made a 2D serious game based on image processing, where each player (4 maximum) must replace the right colors on each part of an animal. She used the XNA framework of Visual Studio to do it.
My task is to develop a new version of this game using Javascript technologies, particularly Pixi.js.
The game works like this : the main Container of the application is separated in 4 areas, one per player ; each of these areas sets its background using a Sprite that I create from the grey-scaled image of the animal the player chosed. At the center of the screen is a color palette represented by an array of Sprites. From this I can drag n' drop a color to the animal Sprite, and the region that represents a part of its body detects the drop. Everything works fine until here, but this is the point where I encounter difficulties.
I would like to change the tint of only the pixels corresponding to this region. The positions of these pixels are registered in an array I create from a text file, that's how I can detect which region receives the color.
I already tried to use a Graphics object from Pixi to redraw the color above the Sprite, but it is extremely slow. I also tried to use Filter, but since I want to color only some pixels and not the entire Sprite, I need to pass (using uniforms) the array of positions to my WebGL shader to make it verify for each pixel if it is part of the ones I want to change. But the shader needs me to declare this array indicating its size. I cannot do that because every region has a different number of pixels.
I am blocked now, and I don't know how to perform what I want...
Is there any solution that does not imply separating my image in several Sprites? I think it would work but if there can be another way, allowing me to avoid this, I would be very thankful!
Thanks in advance, and sorry that this message is so long!

Removing a color in image - CSS, HTML, JS?

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 ;-)

Transform images into a circular variant, changing circle size and place

I love the circular profile pictures, but I hate that you cant edit them. Say for example you dont want the circle in the middle and the standard size, but you want it smaller or something.
Explanation with pictures:
The 4 images, from bottom to top: input, image editor, moving circle, output
Now, I want that you put a normal image in and that there will be a black overlay with some kind of opacity. In the middle you'll have a transparent circle so you can select the part you want in the circle. Then you can press save and there will be a .png file made.
I was thinking of doing this with jQuery watermarks, but I couldn't figure it out. Anyone got a idea?
There are a couple of methods:
You can use CSS2/3 - with corner-radius (for newer browsers) or even just an overlay image, image can be cropped, and background can be scaled/moved via CSS background-position and background-size accordingly. To save the image, you'll need a minimalistic PHP script do do the same operation server-side (given the parameters) and output the image to user.
You can also use HTML5 canvas - specification involves a handy clip method (which is straightforward - limits drawn imagery to current path), and you can obtain the image data via toDataURL method of canvas element as long as image is uploaded to the same server (or cross-domain rules are done right). A minimal search on saving files from JS+HTML5 should further assist.
Sample jsfiddle - http://jsfiddle.net/u2A7t/

Remove background color from image in HTML5 Canvas

I'm trying to strip the background out of a photo image loaded into a HTML5 Canvas. Think of something like a green screen effect.
I'm using HTML/JS/jQuery
The background of the photo will be, for example, a green curtain. The color wont be exact across the curtain because of lighting and such like.
What i'm doing right now is grabbing the RGB value of a pixel that the user clicks on within the Canvas. That's then considered to be the background. I add the R+G+B of that pixel to set what is considered as the background.
I'm then going through the canvas, pixel by pixel, checking if the pixel is close to the RGB value set as the background (say within 50 above or below). If it matches, I change the pixel to be transparent within the canvas.
This works well enough as a proof of concept but not well enough to do anything with.
Does anyone have any better ideas on background subtraction?
Cheers!
Have a look at the GrabCut algorithm or GrowCut algorithm; the former describing 'Foreground Extraction using Iterated Graph Cuts' and the latter, 'Image Segmentation By Cellular Automata'. Both those papers will give you a deeper insight into some of the older algorithms used to remove background image data. If you could somehow implement one of those algorithms in Javascript then I think you're most of the way there.
The OPENcv computer vision library (written in c/c++) has plenty of efficient image manipulation methods to examine. You could try and port one of the OPENcv library's BackgroundSubtractor methods (which I believe is partly based on Chris Stauļ¬€er and W.E.L Grimson's algorithm) to Javascript and then use that to analyse the background and therefore subtract it, but I think they are based on progressive video frames rather than static images.
The js-aruco project on Google code has ported some of the functionality of the OPENcv library already (codebase is here) so you might want to look there first for some inspiration and then, if you're feeling brave, have a look at how you could program the GrabCut or GrowCut algorithms

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?

Categories