2

Estoy trabajando en procesamiento de video con JavaScript, voy bien, pero estoy usando un método llamado, canvasCtx.rect(), este recibe estos parámetros. Parámetros

Y luego ocupo obtener los datos de ese rectángulo que dibujé con el método de getImageData(), pero este recibe estos parámetros:

Parámetros

Se ven similares y son casi iguales, pero en las coordenadas "X" y "Y", .rect() recibe las coordenadas y .getImageData() recibe las coordenadas "X" y "Y" también , pero ahora en pixeles, y no sé si es mi percepción pero estoy dibujando los datos en una gráfica y siento que se muestran un poco desfasado, quería saber si en efecto, deben de ser distintos valores o realmente es lo mismo. Gracias.

1 respuesta 1

5

Te explico, la diferencia se puede obtener a través de un buen análisis textual:

La primera imagen nos dice lo siguiente de las coordenadas:

  • Parametro x: la coordenada "x" a partir de la esquina superior izquierda del rectángulo.
  • Parámetro y: la coordenada "y" a partir de la esquina superior izquierda del rectángulo.

La segunda imagen nos dice lo siguiente de las coordenadas:

  • Parámetro x: la coordenada "x" en pixeles a partir de la esquina superior izquierda desde la cual empezar a copiar.

  • Parámetro y: la coordenada "y" en pixeles a partir de la esquina superior izquierda desde la cual empezar a copiar.

Inciso importante: Ambos métodos tanto el de rect(), como el de getImageData() trabajan con la medida pixeles (px), sólo que en la primera imagen no se especifica que se trabaja con pixeles (se asume que el programador lo sabe).

Entonces la diferencia según lo anterior descrito es la siguiente:

El método rect() y también el método getImageData(), utilizan por defecto el canvas (lienzo), como referencia, y ademas su punto de origen es la esquina superior izquierda.

El método rect dibuja un rectángulo a partir de los parámetros x, y, width y height, entonces el rectángulo será dibujado dependiendo de:

  • Cuantos pixeles debe desplazarse el "pincel" en x (a partir de donde va a dibujar horizontalmente tomando como referencia la esquina superior izquierda).

  • Lo mismo de arriba se aplica al eje vertical (Y).

  • El ancho y alto (width y height), darán el tamaño total del area desde ese punto por ejemplo el pixel (4, 5), (4 en x y 5 en y), en el que se dibujará el rectángulo en el canvas.

Ahora, algo similar pasa con la función getImageData, la diferencia es que esta función no pinta un rectángulo, sino que extrae la data de los pixeles (colores) que están en esa área en un array para que luego puedas usarla para lo que desees.

Por ejemplo, si dibujaste algo en el canvas a modo de paint y luego quieres guardar el dibujo como imagen puedes usar esta función junto con otros métodos para guardar lo que pintaste en el canvas.

Espero esta información te haya servido, saludos!

1
  • Muchas gracias por la información, me fue muy útil c:
    – Jesús
    Commented el 29 ene. 2020 a las 3:47

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.