2

今回、ページを開いた際にグレースケールの画像を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;
}
2
  • 提示されたコードのどのあたりでどのようなエラーが出ますか。
    – int32_t
    2015年12月8日 11:29
  • var imageData = ctx.getImageData(0,0,canvas.width,canvas.height); ここの行で Uncaught SecurityError: Failed to execute 'getImageData' on 'CanvasRenderingContext2D': The canvas has been tainted by cross-origin data というエラーが返ってきます。
    – fangman
    2015年12月8日 16:26

1 件の回答 1

2

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

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

1
  • そうなんですね!色々海外のサイトも見てみたのですが、サーバーで実行する以外には難しいようですね。。。 ご回答、ありがとうございました!
    – fangman
    2015年12月16日 0:44

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。