Canvas で画像モノクロフィルタ

Canvas

コードを書いた時間より、Web サーバにアップすると動くのにローカルで動かない理由が分からなくて首をひねっていた時間の方が長かったという. Firefox のセキュリティーポリシー謎すぎ・・・.

<html>
<head>
<title>Canvas</title>
<script type="text/javascript">
    window.onload = init;
    var img = new Image();
    function init() {
        img.onload = filter;
        img.src = "test.jpg";
    }
    function filter(){
        netscape.security.PrivilegeManager.enablePrivilege("UniversalBrowserRead");
        var canvas = document.getElementById("canvas1");
        canvas.width = img.width;
        canvas.height = img.height;
        var context = canvas.getContext("2d");
        context.drawImage(img, 0, 0);
        for(var y = 0; y < canvas.height; y++) {
            var s = context.getImageData(0, y, canvas.width, 1).data
            var dst = context.createImageData(canvas.width, 1)
            var d = dst.data
            for(var x = 0; x < canvas.width; x++) {
                var i = x * 4;
                var v = Math.floor(s[i] * 0.299 + s[i + 1] * 0.587 + s[i + 2] * 0.114 + 0.5);
                d[i] = d[i + 1] = d[i + 2] = v;
                d[i + 3] = 255;
            }
            context.putImageData(dst, 0, y);
        }
    }
</script>
</head>
<body>
<canvas id="canvas1"/>
</body>
</html>