javascript - tainted - cómo obtener una forma no rectangular usando getImageData()?

putimagedata

Question

La etiqueta html5 canvas tiene asociada la función javascript getImageData () y su valor de retorno es un rectángulo que contiene los píxeles adjuntos.

Pero en lugar de un rectángulo, necesito recuperar mi lienzo original, una imagen en forma de triángulo, encerrada entre los puntos que he elegido.

¿Alguien sabe de qué obtener una imagen en forma de triángulo del lienzo html5?

Answer 1

No puedes.

Dependiendo de lo que intente hacer, en su lugar solo obtenga el rectángulo más pequeño que sea la unión de todos los puntos y solo use el imageData de los píxeles que le interesan.

En otras palabras, si su triángulo tiene puntos en (50,50), (100, 100) y (0,100), obtenga un rectángulo de (0,50) que sea de 100 de ancho con una altura de 50. Entonces solo use los datos de imagen de los píxeles que te interesan

Si, literalmente, quieres una imagen en forma de triángulo, bueno, esos no existen.

Answer 2

Prácticamente nunca trabajo con el procesamiento de imágenes de ninguna forma, por lo que no puedo sugerir detalles, pero probablemente podrías simplemente pintar las partes no deseadas transparentes, y luego copiar el rectángulo.

tal vez buscar camino, región de recorte, llenar

Answer 3

Tenga en cuenta que todas las imágenes son rectangulares. getImageData devuelve datos de mapa de bits, por lo que será una matriz de bytes de 2x2. Lo que puede hacer es dibujar un camino con los puntos que desea y recortar el contenido del lienzo que lo usa. Será como una imagen PNG con píxeles transparentes como fondo.

Answer 4

Si es por razones de eficiencia, entonces no puede obtener una forma no rectangular usando getImageData() . Sin embargo, si quieres la funcionalidad, entonces puedes hacer un clip así ( JS Lint Example ):

var img1 = new Image();
img1.onload = function(){
    var w = img1.width
    var h = img1.height

    ctx.drawImage(img1,0,0);

    // Create a circular clipping path 
    ctx.translate(w / 2,  1.5 * h);       
    ctx.beginPath();
    ctx.arc(0,0,100,0,Math.PI*2,true);
    ctx.clip();
    ctx.drawImage(img1,-w / 2,-150);
}

img1.src = "foobar.jpg";

Lo que obtienes es el original, luego la versión recortada. Puedes hacer esto cada vez que cargas una imagen. Alternativamente, puede crear una imagen creando un segundo lienzo, dibujando pero con el clip. Básicamente, esto crea una versión en caché de su imagen, sigue siendo un rectángulo, pero el clip hace que todo lo que esté fuera del clip sea transparente ( si desea, también puedo dar un ejemplo de eso ).