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
Set Active State on Navigation Dynamically
Performance in Pdo/Php/Mysql: Transaction Versus Direct Execution
MySQL Can't Perform More Than 1 Query at a Time
How to Query Employee Details and Relate Their Performance Metrics
Access Joomla 2.5 from External Script to Get Article by Id
How to Use Prepare() with Dynamic Column Names
Looping Through Query Results Multiple Times with MySQLi_Fetch_Array
How to Install Pdo_Sqlsrv on My Windows 2008 Server 2008 R2
PHP SQL, Query Returns Only One Row of Data
MySQL Select Records Greater Than 3 Months
PHP Datetime() Class, Change First Day of the Week to Monday
Protection Against Xss Exploits
PHP Warning: MySQLi_Close() Expects Parameter 1 to Be MySQLi
PHP How to Write Data to Middle of File Without Rewriting File