すでに述べたように、私は検索に多くの時間を費やしましたが、これまでのところ、html5 キャンバス、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>
デモ.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秒もかかりませんでした（ローカルホスト上）（420回の非同期ajax呼び出し）。元の画像がキャッシュされると、はるかに速く終了します。画質はオリジナルのままです。
繰り返しますが、このソリューションは私の個人的な使用のためのものであるため、コードはかなり管理されておらず、改善できると確信していますが、これで問題ありません。
