0

私は JavaScript が苦手で、Ivan Kuckir の Fastest Gaussian Blurコードを動作させようと試みてきましたが、うまくいきませんでした。ページをロードすると応答しなくなるため、何らかの方法でウィンドウを閉じる必要があります。私が使用するコードは次のとおりです。何が間違っていますか？

<html>
<head>
<script src="Path_To_GaussianBlur.js"></script>
</head>

<body>
<img id="sourceImage" src="SomeImage_200px_x_200px.jpg" />
<canvas id="canvas1" width="200" height="200" style="border: 1px solid blue"></canvas>
<canvas id="canvas2" width="200" height="200" style="border: 1px solid red"></canvas>

<script>
    document.getElementById("sourceImage").onload = function () {

        var c1 = document.getElementById("canvas1");
        var c2 = document.getElementById("canvas2");

        var ctx1 = c1.getContext("2d");
        var ctx2 = c2.getContext("2d");

        var img = document.getElementById("sourceImage");

        ctx1.drawImage(img, 0, 0);
        ctx2.drawImage(img, 0, 0);

        var source = ctx1.getImageData(0, 0, c1.width, c1.height);
        var target = ctx2.getImageData(0, 0, c2.width, c2.height);

        for (var i = 0; i < source.data.length; i += 4) {
            // red chanel
            gaussBlur_4(source.data[i], target.data[i], c1.width, c1.height, 2);
            // green channel
            gaussBlur_4(source.data[i + 1], target.data[i + 1], c1.width, c1.height, 2);
            // blue channel
            gaussBlur_4(source.data[i + 2], target.data[i + 2], c1.width, c1.height, 2);
        }

        ctx2.putImageData(target, 0, 0);
    };
</script>
</body>
</html>
4

1 に答える 1