Crear imagen desde imagen

daPhyre · #1 (**permalink**) 16/07/2011, 00:41

Consigo dinámicamente una imagen a través de [ var img=new Image();img.src="sprites.png"; ], y me gustaría que, dependiendo de una serie de condiciones, devolver una sección específica de esa imagen como una nueva imagen. ¿Es esto posible?

IsaBelM · #2 (**permalink**) 16/07/2011, 04:50

a ver si lo que buscas es la propiedad backgroundPosition

daPhyre · #3 (**permalink**) 16/07/2011, 10:48

Lo que buscaba era devolver una nueva imagen como tal, pero si no hay dicha posibilidad, tendré que recurrir a estos métodos. Gracias

Panino5001 · #4 (**permalink**) 16/07/2011, 11:21

Podrías usar canvas y slicing: https://developer.mozilla.org/en/Can...l/Using_images
Una vez hecho el slice podés usar el método toDataURL para obtener una imagen en formato data: URI.
El problema son las versiones de explorer que no soportan canvas...

daPhyre · #5 (**permalink**) 31/07/2011, 11:28

Precisamente algo así es lo que hago ahora, siendo el destino final un Canvas (Lo siento por los usuarios de IE).

El detalle es que llamo a esta función desde otro punto, y quería ver si era posible guardar estos fragmentos como imágenes en un array, para invocar a esta función pasándole un elemento imagen, y así pueda dibujar un subfragmento de la imagen principal, o una imagen independiente, por igual.

Ej:

Código PHP:

  imgArr[0].src=ctx.drawImage(document.getElementById('source'),33,71,104,124,21,20,87,104);
imgArr[1].src=ctx.drawImage(document.getElementById('source'),133,171,204,224,121,120,187,204);
imgInd.src="image.png";

draw(imgArr[0]);
draw(imgInd);

Claro, si no es posible, tendré que manejarlo con los elementos que tengo disponibles. Muchas gracias

Panino5001 · #6 (**permalink**) 31/07/2011, 12:14

Podés usar el método toDataURL. Un ejemplo básico aquí:

Código PHP:

  <!DOCTYPE html> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>Documento sin título</title> 
<script type="text/javascript"> 
function porcion(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight){ 
    if(document.createElement('canvas').getContext){ 
        var c=document.createElement('canvas'); 
        c.width=dWidth; 
        c.height=dHeight; 
        ctx=c.getContext('2d'); 
        ctx.drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight); 
        var src=c.toDataURL(); 
        var im=document.createElement('img'); 
        im.src=src; 
        document.body.appendChild(im); 
        im=c=null; 
    } 
} 
</script> 
 
</head> 
 
<body> 
<img id="pp" src="arwen.jpg" width="500" height="350" /> 
<form> 
    <input onclick="porcion(document.getElementById('pp'), 0, 0, 50, 50, 0, 0, 50, 50)" type="button" name="button" id="button" value="porcion1" /> 
    <input onclick="porcion(document.getElementById('pp'),50, 100, 100, 100, 0, 0, 100, 100)" type="button" name="button2" id="button2" value="porcion2" /> 
</form> 
</body> 
</html>

daPhyre · #7 (**permalink**) 31/07/2011, 12:20

¡Justo lo que buscaba! Sabía que por ahí iba la cuestión, pero no lograba llegar al punto exacto. ¡Muchísimas gracias!

daPhyre · #8 (**permalink**) 02/08/2011, 23:07

Estoy con un problema de lo más extraño. Guiado por la ayuda que me proporcionaste, realicé el código siguiente:

Código PHP:

      function stack(){
        var tImg=frames[frames.length-1];
        if(tImg!=null&&tImg.height>0){
            frames.pop();
            for(var i=0;i<tImg.width/frameWidth;i++){
                var canvas=document.createElement('canvas');
                canvas.width=frameWidth;
                canvas.heigth=tImg.height;
                var ctx=canvas.getContext('2d');
                ctx.drawImage(tImg,frameWidth*i,0,frameWidth,tImg.height,0,0,frameWidth,tImg.height);
                var src=canvas.toDataUrl();
                alert(src);
                var tImag=new Image();
                tImag.src=src;
                frames.push(tImag);
            }
            return true;
        }
        else
            return false;
    }

Sin embargo, hay un error que impide la correcta realización de dicho código. Firebug me lanza la siguiente línea en el alert que aparece arriba:

Código:

canvas.toDataUrl is not a function
[Detener en este error] var src=canvas.toDataUrl();

Que yo sepa, toDataUrl es una función de Canvas... ¿Alguien sabe que podría estar haciendo mal?

Panino5001 · #9 (**permalink**) 03/08/2011, 04:02

Es toDataURL

daPhyre · #10 (**permalink**) 03/08/2011, 13:12

¡No vuelvo a programar a las 3 de la madrugada!

... De acuerdo, no fue ese el problema. Olvido continuamente la importancia de las mayúsculas y no me detuve a analizar este detalle. ¡Muchas gracias!

Ahora todo funciona perfecto. Desafortunadamente debo encender mi servidor local para pruebas, ya que toDataURL no funciona directo. Pero bueno, funciona sin problemas, que es lo importante. ¡Muchas gracias!