

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

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

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

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

[code]

    $(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);
            }
    
        }
    });
    
[/code]

HTMLは下記になります。

[code]

    <!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>
    
[/code]

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

[code]

    @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;
    }
    
[/code]


CC BY-SA 3.0
2015-12-08T10:37:26.597
19761
2016-02-12T01:56:55.410
2015-12-08T10:42:51.713
5044
9542
question
javascript css html5 画像 html5-canvas
getimageDataを使ってもローカル環境だと画像が上手く読み込めません


基本的には、ウェブサーバで実行する以外に対処不可能です。

Google Chrome と Opera
では、ローカルに保存されたページ同士での情報漏洩対策ですべてのローカルファイルが別オリジンだとみなされます。`–allow-file-access-
from-files`
という起動オプションを付ければ他のブラウザと同じ挙動になりますが、ユーザに起動オプションを付けて起動しろというのは現実的ではないと思います。


CC BY-SA 3.0
2015-12-14T00:39:02.200
19950
2016-02-12T01:56:55.410
2016-02-12T01:56:55.410
3475
3475
19761
answer