読者です 読者をやめる 読者になる 読者になる

totorajの開発日記

僕がなんかメモる

クロスドメイン制約によるcanvasの汚染を回避してみる

タイトル通りです。

あんまり実用的ではないかも?

方法

XMLHttpRequestを使って、外部の画像をArrayBufferとして取得してBlob経由でcanvasに描画します。

参考: CORS Enabled Image - HTML | MDN

ソースコード

簡易なデモコードです。

HTMLは想像してください。

var canvas = document.getElementById("canvas"),
    ctx = canvas.getContext("2d");

// 適当にリクエストを投げる
var url = "https://pbs.twimg.com/profile_images/656821360358854657/qKSAV4Pz_bigger.png";
var req = new XMLHttpRequest();
req.open("GET", url, true);
req.responseType = "arraybuffer";
req.addEventListener("load", function (event) {
    if (req.status !== 200) {// 一応ステータスコードだけ確認
        alert("Invalid status code");
        return;
    }
    
    // Blobを作成しURLを取得する
    var blob = new Blob([req.response]),
        blobUrl = URL.createObjectURL(blob);
    
    // いつも通りcanvasに描画
    var Image = new Image();
    image.src = blobUrl;
    image.addEventListener("load", function () {
        ctx.drawImage(image, 0, 0);
    });
});
req.send();

サンプル

GitHubにサンプルを置いてあります。

サンプル: https://totoraj930.github.io/Koneta/tainted-canvas/

ソースコード: Koneta/index.html at gh-pages · totoraj930/Koneta · GitHub

おわりに

BlobじゃなくてBase64とかでも行けると思う。

文章がくそ雑い。

ゆるして。