Ошибка при распространении дизеринга в JS - PullRequest
Новая
       8

Ошибка при распространении дизеринга в JS

0 голосов
/ 25 апреля 2020

В моем коде есть какая-то непонятная ошибка, и поэтому я здесь ищу помощи.

Код в отдельном файле jscode. js пишет: 

function loadImage(){

    var canvas = document.getElementById("myCanvas");

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

    var source = new Image();

    source.onload = function(){
        context.drawImage(source,0,0);

        frameOffset = 50;

        myImage = context.getImageData(0 + frameOffset,0 + frameOffset,this.naturalWidth - frameOffset*2, this.naturalHeight - frameOffset*2);

        width = this.naturalWidth - 2* frameOffset;

        height = myImage.data.length / (4* width);

        var error = new Array(height);

        for(index = 0; index < height; index ++){
            error[index] = new Array(width + 1);
            for(index2 = 0; index2 <= width; index2 ++)error[index][index2] = parseInt(0);
        }


        for (i = 0; i < myImage.data.length; i+=4){

            row = Math.floor(i / (width * 4));

            column = i % (width * 4);

            intensity = (myImage.data[i] + myImage.data[i+1] + myImage.data[i+2])/3;

            intensity -= error[row][(column/4) + 1];

            if(intensity < 128){result = 0;}
            else {result = 255;}

            curError = result - intensity;

            myImage.data[i] = myImage.data[i+1] = myImage.data[i+2] = result;

            if(column < width * 4){error[row][(column/4) + 2] += Math.floor(curError * 7 / 16);}

            anotherRow = row + 1;
            error[anotherRow][(column/4)] += Math.floor(curError * 3 / 16);

        }

        context.putImageData(myImage,0 + frameOffset,0 + frameOffset);

    }

    source.src = "src.png";
}

the html код файла выглядит примерно так: 

<!doctype HTML>
<html>
<head>
    <script type = "text/javascript" src="jscode.js"></script>
</head>
<body onload = "loadImage()">

    <!img id = "bg" src = "src.png">

    <canvas id = "myCanvas" width = "1024px" height = "727px">

    </canvas>

    <p id = "text" width = "1000">text</p>
</body>
</html>

Когда я закомментирую часть anotherRow, изображение будет выглядеть примерно так (просто выбрано несколько случайных изображений) enter image description here

Но когда я сохраняю деталь, возникает ошибка с «Невозможно получить свойство '0' с неопределенной или нулевой ссылкой»

Исходное изображение выглядит примерно так: enter image description here

Могу ли я получить совет?

...