As I already told, I spent a lot of time searching and what I found so far is using html5 canvas, javascript and ajax.
Only library I used is javascript library jQuery but it is optional. Code can be easily rewritten to use plain javascript.
How it works:
1) js pulls data from ajax.php which returns an array of all the files
2) js then loops thru file list and performs change(src,color) for each item
3) js function change(src,color) loads image from source, replaces it's color and adds an img element to #Cell and displays it (for debug).
4) change() also calls save(src,filename,cname) function
5) js function save(src,filename,cname) sends an ajax request with image data and ajax.php saves image to server.
So here's the code:
ajax.php
<?php
$r = $_REQUEST;
$act = $r['action'];
if($act == "get_all") {
$js = "";
$dir = getcwd()."/img/";
$images = glob($dir."/*.png",GLOB_BRACE);
foreach($images as $image) {
$name = basename($image);
$js[] = $name;
}
echo json_encode($js);
die();
}
elseif($act == "save") {
$img = $r['file'];
$name = $r['name'];
$color = $r['color'];
$dir = "results/$color";
if(!file_exists($dir) || !is_dir($dir)) mkdir($dir,777,true);
$file = $dir."/$name";
file_put_contents($file,file_get_contents("data://".$img));
if(file_exists($file)) echo "Success";
else echo $file;
die();
}
index.php (html only)
<!doctype html>
<html>
<head>
<script src="jquery.js" type="text/javascript"></script>
<script src="demo.js" type="text/javascript"></script>
</head>
<body>
<div id="ctrl">
<input type="text" id="color" value="#666666" placeholder="Color in HEX format (ex. #ff0000)" />
<input type="text" id="cname" value="grey" placeholder="Color name (destionation dir name)" />
<button type="button" id="doit">Change</button>
</div>
<div id="Cell">
</div>
</body>
</html>
demo.js
$(document).ready(function() {
$(document).on("click","#doit",function() {
var c = $("#color");
if(c.val() != "") {
$("#Cell").html("");
$.post("ajax.php",{ action: "get_all" },function(s) {
var images = $.parseJSON(s);
$.each(images, function(index, element) {
change(images[index], c.val());
});
});
}
});
});
function change(src,color) {
var myImg = new Image();
myImg.src = "img/"+src;
myImg.onload = function() {
var canvas = document.createElement("canvas");
var ctx = canvas.getContext("2d");
ctx.drawImage(myImg,0,0);
var imgd = ctx.getImageData(0, 0, myImg.width, myImg.height);
canvas.height = myImg.height;
canvas.width = myImg.width;
var new_color = HexToRGB(color);
// console.log(imgd)
for (i = 0; i <imgd.data.length; i += 4) {
imgd.data[i] = new_color.R;
imgd.data[i+1] = new_color.G;
imgd.data[i+2] = new_color.B;
}
ctx.putImageData(imgd, 0, 0);
var newImage=new Image()
newImage.src=canvas.toDataURL("image/png");
$(newImage).css("margin","5px");
$(newImage).attr('data-title',src);
$("#Cell").append(newImage);
var c = $("#cname");
if(c.val() == "") c.val("temp");
save(newImage.src,src, c.val());
};
}
function save(src,filename,cname) {
$.post("ajax.php", { action: "save", file: src, name: filename, color: cname },function(s) {
console.log(s);
})
}
function HexToRGB(Hex)
{
var Long = parseInt(Hex.replace(/^#/, ""), 16);
return {
R: (Long >>> 16) & 0xff,
G: (Long >>> 8) & 0xff,
B: Long & 0xff
};
}
I have tested it, for re-coloring and saving 420 24x24 images, it took less than 10 seconds (on localhost) (420 async ajax calls). Once original images are cached, it finishes much faster. Image quality stays the same as original.
Again, this solution is for my personal use so code is pretty unmanaged and I am sure it can be improved but here you go - as is, it works.
