Как я уже сказал, я потратил много времени на поиски и что я нашел до сих пор использует 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>
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 секунд (на локальном хосте) (420 асинхронных вызовов aynax). Когда исходные изображения кэшируются, он заканчивается намного быстрее. Качество изображения остается прежним.
Опять же, это решение для моего личного использования, поэтому код довольно неуправляемый, и я уверен, что его можно улучшить, но здесь вы идете - как есть, он работает.
вы можете разместить код для решения, что привело к 3-изображение? – Maximus2012
@ Maximus2012 да, пожалуйста, дайте мне мгновение, я должен найти его, потому что я пробовал много других, но безуспешно. –
@ Maximus2012 обновил мой вопрос. –