JavaScript - píxeles de imagen

Pos: 26

Val: 62

píxeles de imagen

Publicado por pedro (71 intervenciones) el 19/11/2019 17:03:43

Buenas tardes:
Estoy intentando obtener los píxeles de una imagen.
He probado con getImageData(0,0,canvas.width,canvas.height) sobre un canvas pero me dice

SecurityError: The operation is insecure.

La imagen se encuentra en el mismo directorio que el archivo.

Alguna idea o algún otro método. Gracias.

Valora esta pregunta

Me gusta: Está pregunta es útil y esta clara

No me gusta: Está pregunta no esta clara o no es útil

Responder

Pos: 1

Val: 3.506

píxeles de imagen

Publicado por joel (895 intervenciones) el 19/11/2019 19:00:19

Hola Pedro, yo lo he probado sobre una imagen 2D creada con canvas y funciona perfectamente...

Nos puedes mostrar tu código para poder probarlo?

Valora esta respuesta

Me gusta: Está respuesta es útil y esta clara

No me gusta: Está respuesta no esta clara o no es útil

Comentar

Pos: 26

Val: 62

píxeles de imagen

Publicado por pedro (71 intervenciones) el 19/11/2019 19:42:13

Hola, Joel. Gracias por contestar.

Mi código es el siguiente:

function update() {

    canvas = document.getElementById("micanvas");

    var ctx = canvas.getContext("2d");

    var img = new Image();

    img.src = 'fondo.jpg';

    ctx.drawImage(img, 0, 0);

    ctx.fill();

    ctx.stroke();

    var imageData = ctx.getImageData(0,0, 650, 420 );

El error me lo da en mozilla, en Ubuntu.
Lo tengo en un script en el mismo archivo html en el que está en canvas y se carga al iniciar el body.

Gracias.

Valora esta respuesta

Comentar

Pos: 2

Val: 3.162

píxeles de imagen

Publicado por xve (2100 intervenciones) el 21/11/2019 08:35:38

Hola Pedro, no se que navegador estas utilizando, pero yo lo he probado y me ha funcionado perfectamente, la única diferencia que yo he utilizado ha sido ponerlo dentro del evento onload() de la imagen... algo así:

img.src = 'fondo.jpg';

img.onload=() => {

    ctx.drawImage(img, 0, 0);

   var imageData = ctx.getImageData(0,0, 650, 420 );

ctx.fill();

ctx.stroke();

Te funciona así?

Valora esta respuesta

Comentar

Pos: 26

Val: 62

píxeles de imagen

Publicado por Pedro (71 intervenciones) el 21/11/2019 12:51:58

Gracias por contestar:

Al escribir el código se carga la página y la imagen en el canvas.
El problema es cuando intento obtener los píxeles del canvas:

Escribo

var pixels = imageData.data;

alert(pixels);

y no aparece nada.

Al pulsar F12 es cuando me aparece el error

SecurityError: The operation is insecure.

en la consola.
He probado el mismo código dibujando un rectángulo y me devuelve los píxeles correctamente. El problema es al incluir la imagen. Supongo que será un problema de seguridad.

Lo que quiero es obtener los píxeles RGB de una imagen para trabajar con ellos, pero no lo consigo.

Gracias.

Valora esta respuesta

Comentar

Determinar si una persona es o no un Filósofo Hipster

Declarar un Array en javascript indicando el tamaño del mismo, sin asignarle valores.