正如我已经说过的，我花了很多时间搜索，到目前为止我发现的是使用 html5 canvas、javascript 和 ajax。
我使用的唯一库是 javascript 库 jQuery，但它是可选的。代码可以很容易地改写为使用普通的 javascript。
它是如何工作的：
1) js 从 ajax.php 中提取数据，返回所有文件的数组
2) js 然后循环遍历文件列表并为每个项目执行change(src,color)
3) js 函数change(src,color) 从源加载图像，替换它的颜色并将一个img 元素添加到#Cell 并显示它（用于调试）。
4) change() 也调用 save(src,filename,cname) 函数
5) js 函数save(src,filename,cname) 发送带有图像数据的ajax 请求，ajax.php 将图像保存到服务器。
代码如下：
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）
<!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
};
}
我已经对其进行了测试，对于重新着色和保存 420 个 24x24 图像，它花费了不到 10 秒（在 localhost 上）（420 个异步 ajax 调用）。一旦原始图像被缓存，它就会更快地完成。图像质量与原始图像相同。
同样，这个解决方案是供我个人使用的，所以代码非常不受管理，我相信它可以改进，但你去吧 - 照原样，它可以工作。