J'essaie de transformer une image couleur en noir et blanc. J'ai cherché sur Google et j'ai trouvé du code en JavaScript et je l'ai converti en TypeScript. Mais le code ne renvoie pas toutes les photos et une partie de la photo devient noir et blanc.

Par exemple, je reçois les entrées et sorties suivantes :

InPut

OutPut

Mon code est comme ceci:

GrayScale() {
    const www = this;
    const myimage = new Image();
    myimage.src = this.croppedImage.src;
    myimage.onload = function () {
        const cnv = document.createElement('canvas');
        const cnx = cnv.getContext('2d');
        cnx.drawImage(myimage, 0, 0);
        const width = myimage.width;
        const height = myimage.height;
        const imgPixels = cnx.getImageData(0, 0, width, height);

        for (let y = 0; y < height; y++) {
            for (let x = 0; x < width; x++) {
                const i = (y * 4) * width + x * 4;
                const 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);
        www.croppedImage.src = cnx.canvas.toDataURL();
    };
}

Est-ce que quelqu'un sait quelle en est la raison ? Merci de votre aide

1
mahdi aghasi 16 sept. 2020 à 19:23

1 réponse

Meilleure réponse

Après avoir créé la toile, vous devez définir sa largeur et sa hauteur. Sinon, la taille par défaut n'est pas égale à la taille de l'image et l'image résultante est rognée. C'est à dire.:

cnv.width = myimage.width;
cnv.height = myimage.height;
1
Arty 16 sept. 2020 à 17:21