Dynamically Changing Image Colours

Dynamically changing image colours

I would use jQuery for this and set the color behind the png or of the png regarding the css class/es of the table.

Dont use too much php like Imagemagick because it slows down the rendering of the page dramatically.

take a look at Pixastic (coloradjust)

https://github.com/jseidelin/pixastic
http://www.pixastic.com/lib/docs/actions/coloradjust/

or PaintbrushJS (colour tint)

https://github.com/mezzoblue/PaintbrushJS

http://mezzoblue.github.com/PaintbrushJS/demo/

or CamanJS (colorize)

http://camanjs.com/

http://camanjs.com/guides/#BuiltIn

https://github.com/meltingice/CamanJS/

or VintageJS
http://rendro.github.io/vintageJS/

https://github.com/rendro/vintageJS

Dynamically Change Image Object Color and Set Text

What I recommend to do is split (in any graphic tool) the image to 3 parts: background, gift body, and strap.

The gift image will be overlay of this 3. when the gift body is grayscale, drawn with canvas, and go over color filter anytime the color change.

Something like this:

var canvas = document.getElementById('gift-body');    var ctx = canvas.getContext('2d');    var mCanvas = document.createElement('canvas');    var mCtx = mCanvas.getContext('2d');    mCanvas.width = canvas.width;    mCanvas.height = canvas.height;    var img = new Image();    img.onload = function(){        mCtx.drawImage(img, 0, 0, canvas.width, canvas.height);        updateImage('#1013a1');    };    img.src = 'data:image/png;base64,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';
function colorize(r, g, b) { var imageData = mCtx.getImageData(0, 0, canvas.width, canvas.height); for (var i=0; i<imageData.data.length; i+=4){ imageData.data[i] *= r/255; imageData.data[i+1] *= g/255; imageData.data[i+2] *= b/255; } ctx.putImageData(imageData, 0, 0); } function hexToRgb(hex) { hex = parseInt(hex, 16); var r = hex >>16; var g = (hex - (r<<16)) >>8; var b = hex - (r<<16) - (g<<8); return [r, g, b]; } function updateImage(color) { color = hexToRgb(color.replace('#', '')); colorize(color[0], color[1], color[2]); }
#img-cont {            position: relative;            width: 500px;            height: 500px;            margin: auto;        }        img, canvas {            position: absolute;            display: block;            top:0;            left:0;            width: 100%;            height: 100%;        }        label {            display: block;            text-align: center;            margin: 20px;        }
<label>Pick  a color: <input type="color" onchange="updateImage(this.value)" value="#1013a1"/></label><div id="img-cont">    <img id="gift-bg" src="https://i.stack.imgur.com/QdB9U.png"/>    <canvas id="gift-body" width="500" height="500"></canvas>    <img id="gift-strap" src="https://i.stack.imgur.com/Y9DND.png"/></div>

How to change color of certain parts of an image dynamically?

You would use multiple svgs that would be layered on top of each other. And then using javascript you could modify the color and replace content of svg with different variation.

You would have different layer for hair, eyes, lips, face, nose, ears, and so on. User would be able to just change one item at a time, and it'd affect one layer.

Once user is happy he would click save, and then you could save information about all layers in json format and this way always be able to recreate it, but if you wanted you can also convert it to png.

One way to do it would be this: Drawing an SVG file on a HTML5 canvas

But ideally i'd want backend to take just information on configuration like below and build picture there.

 {
face: {
eyes: 3,
nose: 1,
hair: 4,
skin: 3
},
colors: {
eyes: 3,
general: 1,
nose: 4
},
accessories: [{
{
name: 'hat',
x: 30,
y: 10,
type: 3
}, {
name: 'sticker_star',
x: 20,
y: 10,
type: 1
}, {
name: 'glasses',
x: 550,
y: 30,
type: 1
}
}]
}

SVG change dynamic color

You can convert the given svg url into text and then you can change the color by using the fill and stroke methods in CSS.

the code would be,

    function getTheSvg(url) {
return fetch(url).then((res) => res.text());
}
const getTextFromSvg = async (url) => {

let svgVal = await getTheSvg(url).then((res) => {

return res;
});
getTextFromSvg("https://yoururl.svg");

Changing colors of an image dynamically

That's not going to be easy the way the image is. You have no way to tell the computer which part is the bow, which part is the stripes, and which part is the box. However, if you pre-colored them, you could do a color replace using GD library or imagemagick pretty easily. You'd do this in PHP. Here are some examples of how you could do it, I'd personally go the imagemagick route.

How can I replace one color with another in a png 24 alpha transparent image with GD

http://www.imagemagick.org/Usage/color_basics/#replace
(this example even has a similar gift box as the usage case, hehe)



Related Topics



Leave a reply



Submit