クロスドメイン制約による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 にサンプルを置いてあります。

サンプル: Koneta/tainted-canvas

ソースコード: Koneta/tainted-canvas/index.html

おわりに

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

文章がくそ雑い。

ゆるして。