用Js將彩色圖片轉換成黑白，失敗

剛剛接觸canvas，學著把一張圖片轉換成黑白的。
但是始終不能成功，有點懵逼。

謝謝大家。

    <body>
        <canvas width="500" height="500"></canvas>

        <script>
            var canvas = document.querySelector("canvas");
            var ctx = canvas.getContext("2d");

            var image = new Image();
            image.onload = function(){
                ctx.drawImage(image,0,0);
                makeGrayScale();
            }

            image.src = "images/background.jpg";

            var makePixelGrayScale = function (r,g,b,a){
                var y = ( 0.3 * r) + ( 0.59 * g ) + ( 0.11 * b);
                return {r:y,g:y,b:y,a:y};
            };

            function makeGrayScale(){
                var r,g,b,a;
                var imageData = ctx.getImageData(0,0,500, 500)
                var numPixels = imageData.data.length/4;
                for (var i=0; i<numPixels; i++){
                    r = imageData.data[i*4+0];
                    g = imageData.data[i*4+1];
                    b = imageData.data[i*4+2];
                    a = imageData.data[i*4+3];
                    pixel = makePixelGrayScale(r,g,b,a);
                    imageData.data[i*4+0] = pixel.r;
                    imageData.data[i*4+1] = pixel.g;
                    imageData.data[i*4+2] = pixel.b;
                    imageData.data[i*4+3] = pixel.a;
                }
                ctx.putImageData(imageData,0,0);
            };

        </script>
    </body>

Uncaught DOMException: Failed to execute 'getImageData' on 'CanvasRenderingContext2D': The canvas has been tainted by cross-origin data.
    at makeGrayScale (file:///C:/Users/yocor/Github/aboutCanvas/createCanvas.html:26:37)
    at Image.image.onload (file:///C:/Users/yocor/Github/aboutCanvas/createCanvas.html:14:17)

回答

編輯回答