http://data:image/png;base64,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
imgLoad.php
<?php
function imgLoad($url){
if(strlen($url) > 0){
$size = getimagesize($url);
if(is_array($size)){
header("Content-type: " . $size['mime']);
echo file_get_contents($url);
} // end if
}//end if
}// end function imgLoad
imgLoad($_GET['url']);
?>
Lo_que_quieras.html
<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript">
//retornar lienzo
var returncanvas = function(id) {
var canvas = document.getElementById(id);
if (canvas !== null) {
if (canvas.getContext) {
canvas = canvas.getContext("2d");
return canvas;
} else {
alert("Existe, pero... ¿Será un lienzo?");
return false;
}
} else {
alert("¿Estás seguro que eso existe?");
return false;
}
};//end retornar lienzo
// función dibujar imagenes
var dibujarImage = function(lienzo, imagen, x, y){
var img = new Image();
img.src = imagen;
img.onload = function(){
lienzo.drawImage(img,x,y)
}
};
//end función dibujar imagenes
//dibujar
function dibujar() {
var canvas=returncanvas("canvas1");
if (canvas) {
canvas.strokeStyle = "rgb(200,0,0)";
//Inicio de camino
dibujarImage(canvas, "http://localhost/imgload.php?url="+ encodeURIComponent("http://www.habbo.es/habbo-imaging/avatarimage?user=" + formx.habbo1.value +"&action=&frame=3&direction=1&head_direction=1&gesture=&size=l&img_format=png&x=.png"), 0, 0);
dibujarImage(canvas, "http://localhost/imgload.php?url="+ encodeURIComponent("http://www.habbo.es/habbo-imaging/avatarimage?user=" + formx.habbo2.value +"&action=frame=3&direction=5&head_direction=1&gesture=&size=l&img_format=png&x=.png"), 30, 0);
}
}
</script>
</head>
<body">
<form name="formx">
<input type="text" name="habbo1" value="@AgustinAlvia">
<input type="text" name="habbo2" value="Femenina">
<input type="button" value="Generar Imagen" onClick="dibujar()">
<input type="button" value="Descargar" onClick='window.open(document.getElementById("canvas1").toDataURL(), "_blank")'>
</form>
<canvas id="canvas1" width="600" height="600">
<!-- fall back -->
Usa un navegador más sofisticado
</canvas>
</body>
</html>
