今回、ページを開いた際にグレースケールの画像をcanvasに書き出し、そこにマウスを乗せると徐々にカラーがつく、という仕様のギャラリーページ（もどき）をつくってみました。

すると、下記の部分にエラーが出ました。

調べてみたところ、ローカル環境ではChromeとOperaにおいて同様のエラーが出るとのこと。
解決策はサーバー環境をMAMPなどで立ち上げることだそうで、実際にそれで試したところ成功しました。

ただ、ChromeやOperaのブラウザでみた際にも同じような挙動にしておきたいのですが、方法はありますでしょうか？

$(window).load(function(){
    $('#gallery img').each(function(){
        createCanvas(this);
        //#gallery imgに対してcreateCanvasという関数を走らせる
    });


//createCanvasの定義

    function createCanvas(image){
        //canvas要素を生成
        var canvas = document.createElement('canvas');
        if(canvas.getContext){
            var ctx = canvas.getContext("2d");

            //キャンバスの大きさを決める <canvas width="300" height="300"></canvas>
            canvas.width = image.width;
            canvas.height = image.height;
            //0,0の位置にimageを描画する
            ctx.drawImage(image,0,0);
            //imageDataにデータを取得して入れる
            var UimageObj = new Image();
            UimageObj.crossOrigin = 'anonymous';
            UimageObj.src = obj_data.srcUser;

            var imageData = ctx.getImageData(0,0,canvas.width,canvas.height);
            //pixelDataに画像のデータを入れる
            var pixelData = imageData.data;
            //全てのピクセルデータに対してループ処理でrgbaの値を調整する
            //xをカウントアップした上で、yをカウントアップする
            for(var y = 0; y < canvas.height; y++){
                for(var x = 0; x < canvas.width; x++){
                    //i番目の要素の色を識別し、設定する。2重ループなのでまずはxからカウントアップして、下の変数を設定。
                    var i = (y * 4 * canvas.width) + (x * 4);
                    //rgbの値を取得する

                    var red = pixelData[i];
                    var green = pixelData[i+1];
                    var blue = pixelData[i+2];

                    //グレースケールへの変換のために使う変数
                    var grayscale = (red * 0.3) + (green * 0.59) + (blue * 0.11);
                    pixelData[i] = grayscale;
                    pixelData[i+1] = grayscale;
                    pixelData[i+2] = grayscale;
                    // pixelData[i+3] = 255;
                }
            }
            ctx.putImageData(imageData,0,0,0,0,imageData.width,imageData.height);
            image.parentNode.insertBefore(canvas,image);
        }

    }
});

HTMLは下記になります。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>GALLERY FOR CANVAS</title>
    <link rel="stylesheet" href="./css/reset.css">
    <link rel="stylesheet" href="./css/gallery.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script src="./js/gallery.js"></script>

</head>
<body>
    <div id="wrap">
        <h1>GALLERY</h1>
        <ul id="gallery">
            <li><a href="#"><img src="./img/photo1.jpg" alt="1"><span>2010/04/08</span></a></li>
            <li><a href="#"><img src="./img/photo2.jpg" alt="2"><span>2011/05/09</span></a></li>
            <li><a href="#"><img src="./img/photo3.jpg" alt="3"><span>2012/06/10</span></a></li>
            <li><a href="#"><img src="./img/photo4.jpg" alt="4"><span>2013/07/11</span></a></li>
            <li><a href="#"><img src="./img/photo5.jpg" alt="5"><span>2014/08/12</span></a></li>
            <li><a href="#"><img src="./img/photo6.jpg" alt="6"><span>2015/09/13</span></a></li>
        </ul>
    </div>
</body>
</html>

参考までにCSSは下記になります。

@charset: "utf-8";

#wrap{
    width: 1020px;
    margin: 0 auto;
}

li {
    float: left;
    position: relative;
    display: inline-block;
    width: 300px;
    height: 300px;
    margin: 10px;
    padding: 10px;
    background-color: #fff;
    box-shadow: 0 0 5px rgba(0,0,0,0.35);
}

li span{
    width: 280px;
    height: 0;
    position: absolute;
    bottom: 10px;
    left: 10px;
    background: rgba(0,0,0,0.45);
    overflow: hidden;
    padding: 0 10px;
    line-height: 50px;
    color: #fff;
    text-align: center;
    transition: height 1s;
}

li:hover span{
    height: 50px;
}

canvas{
    opacity: 1;
    position: absolute;
    top: 10px;
    left: 10px;
    transition: 1s 0.2s;
}

li:hover canvas{
    opacity: 0;
}