Hola:
Mejor que un link, pongo el código:
Código:
<html>
<head>
<style type="text/css">
<?php
function hexa($n) {
$digitosHexa = "0123456789ABCDEF";
return $digitosHexa[$n / 16].$digitosHexa[$n % 16];
}
$correcto = true;
if (isset($_GET["imagen"])) {
$imagen = $_GET["imagen"];
if (isset($_GET["escala"])) $escala = $_GET["escala"];
else $escala = 1;
echo "div\t{position: absolute; width: $escala"."px; height: $escala"."px;}\r";
$img = imagecreatefromstring(fread(fopen($imagen, "rb"), filesize($imagen)));
if ($img) {
$ancho = imagesx($img);
$alto = imagesy($img);
for ($i = 0; $i < $ancho; $i ++)
for ($j = 0; $j < $alto; $j ++) {
$pixelxy = imagecolorat($img, $i, $j);
$rgb = imagecolorsforindex($img, $pixelxy);
echo "#pixel_".$i."_$j {background-color: #"
.hexa($rgb["red"])
.hexa($rgb["green"])
.hexa($rgb["blue"])
."; left: ".($i * $escala)
."; top: ".($j * $escala).";}\r";
}
}// fin if ($img)
else
$correcto = false;
}// fin if (isset())
else
$correcto = false;
?>
body {
overflow: hidden;
}
</style>
<script>
function acomodar(ancho, alto) {
if (parent.acomodar) parent.acomodar(ancho, alto);
else alert("ancho: " + ancho + "\nalto: " + alto);
}
var pintar = "#000000";
var activa = false;
function activar_color(cual) {
//alert(cual);
pintar = cual;
}
function pintando(que) {
if (activa) que.style.backgroundColor = pintar;
}
</script>
</head>
<body onload="acomodar(<? echo ($ancho * $escala).", ".($alto * $escala);?>)">
<?php
if ($correcto)
for ($i = 0; $i < $ancho; $i ++)
for ($j = 0; $j < $alto; $j ++)
echo "<div id='pixel_".$i."_$j' onmouseup='activa = false' onmousedown='activa = true' onmousemove='pintando(this)'></div>\r";
?>
</body>
</html>
En condiciones normales, comparto mis códigos.
La cuestión para generar una imagen sería la forma inversa, o sea crear la imagen con imagecreate(ancho, alto), y escribir pixel a pixel...
Saludos
