正如我已經告訴了，我花了很多時間尋找什麼，我發現迄今是使用HTML5畫布，JavaScript和Ajax。
只有我使用的庫是JavaScript庫jQuery的，但它是可選的。代碼可以很容易地重寫爲使用普通的JavaScript。
工作原理：
1）從JS其中ajax.php返回所有文件
2的陣列中提取數據）的js然後循環直通文件列表，並對每個項目
執行
change(src,color)
3）js函數從源中加載圖像，替換它的顏色並將一個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調用）。一旦原始圖像被緩存，它會更快地完成。圖像質量與原始圖像保持一致。
同樣，這個解決方案是我個人使用的，所以代碼非常不受管理，我相信它可以得到改進，但是在這裏你可以繼續 - 因爲它是有效的。
您可以張貼，導致第3圖像解決一些代碼？ – Maximus2012
@ Maximus2012是的，請給我一點時間，我必須找到它，因爲在此期間，我嘗試了許多其他人，但沒有成功。 –
@ Maximus2012更新了我的問題。 –