Básicamente, cuando se hace clic en un botón, le indicará al dispositivo móvil que vaya a la cámara. Una vez que la cámara toma una foto, me dará los datos de la imagen (¿se llama URL de datos?). Este es mi código para manejarlo:

var imagesrc = "data:image/jpeg;base64," + imageData;

var myimage = new Image(500, 500);
myimage.src = imagesrc;            <---- to populate the object with the colored image
myimage.src = grayscale(myimage);  <---- here I set it to the grayscale image

Quiero llamar a un método llamado grayscale() y hacer que devuelva la imagen que se ha convertido en escala de grises. Intenté esto:

function grayscale(image){
    var canvasContext = canvas.getContext('2d');
    var imgW = image.width;
    var imgH = image.height;
    canvas.width = imgW;
    canvas.height = imgH;

    canvasContext.drawImage(image, 0, 0);

    var imgPixels = canvasContext.getImageData(0, 0, imgW, imgH);


    for(>var y = 0; y < imgPixels.height; y++){
        for(>var x = 0; x < imgPixels.width; x++){
          var i = (y * 4) * imgPixels.width + x * 4;
          var avg = (imgPixels.data[i] + imgPixels.data[i + 1] + imgPixels.data[i + 2]) / 3;
          imgPixels.data[i] = avg;
          imgPixels.data[i + 1] = avg;
          imgPixels.data[i + 2] = avg;
        }
    }

    canvasContext.putImageData(imgPixels, 0, 0, 0, 0, imgPixels.width, imgPixels.height);

    dataurl = canvas.toDataURL();
    var newimg = "data:image/jpeg;base64," + dataurl;
    return newimg;
}

Pero por alguna razón no funciona. Simplemente no muestra la imagen en escala de grises. Obtuve el código de bucle for en línea y lo modifiqué.

2
Mingle Li 12 may. 2016 a las 01:57

3 respuestas

La mejor respuesta

Hay varias razones por las que esto no funciona. Sería bueno comenzar a verificar la salida de la consola para rastrear errores. Firefox "F12", por ejemplo, le dirá que for(>var ...) es un problema. ;)

¿Declaraste canvas en algún lugar, fuera del código que compartiste con nosotros? ¿Se declara dataurl? El prefijo de toDataUrl no es necesario ...

Aquí hay un archivo html básico que escribí alrededor de su bucle for, que convierte "test.png" en gris. Tal vez desee guardarlo en algún lugar, poner un png en la misma carpeta y comenzar a editar cosas paso a paso, en lugar de copiar el código. Si se siente preparado para un desafío, intente hacerlo pasar http://jslint.com/. (Supongo que tendrías que reemplazar el bucle for por bucles while). :)

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>Canvas/ImgData Test</title>
</head>

<body>
    <canvas id="output"></canvas>
    <script>
        var cnv = document.getElementById('output');
        var cnx = cnv.getContext('2d');

        function grey(input) {
            cnx.drawImage(myimage, 0 , 0);
            var width = input.width;
            var height = input.height;
            var imgPixels = cnx.getImageData(0, 0, width, height);

            for(var y = 0; y < height; y++){
                for(var x = 0; x < width; x++){
                    var i = (y * 4) * width + x * 4;
                    var avg = (imgPixels.data[i] + imgPixels.data[i + 1] + imgPixels.data[i + 2]) / 3;
                    imgPixels.data[i] = avg;
                    imgPixels.data[i + 1] = avg;
                    imgPixels.data[i + 2] = avg;
                }
            }

            cnx.putImageData(imgPixels, 0, 0, 0, 0, imgPixels.width, imgPixels.height);
        }

        var myimage = new Image();
        myimage.onload = function() {
            grey(myimage);
        }
        myimage.src = "test.png";
    </script>
</body>
</html>
3
Jonas M. Schlatter 12 may. 2016 a las 00:00

Sé que está buscando convertir dataURI a escala de grises, pero , si desea convertir los comentarios de video a escala de grises o convertir cualquier imagen a escala de grises, puede usar este código.

.gray {
  filter: grayscale();
}
 <!--hey use this style to show in gray scale. can even use to convert image to grayscale-->
 <video id="camera-stream" class="gray" ></video>
0
ATUL ANAND 12 ago. 2019 a las 17:26

No debe tomar el promedio de los 3 componentes de color, ya que varían mucho en brillo (100% de verde es mucho más brillante que 100% de azul). Los sistemas de TV (PAL y NTSC) definen el brillo de la imagen en escala de grises como 29.9% Rojo + 58.7% Verde + 11.4% Azul.

0
Antony Penn 21 mar. 2020 a las 16:12