Canvas のセキュリティモデルでちょっとはまった件

html5 canvas

HTML5 の canvas の 2D context には getImageData() というメソッドがあって、これを使うと canvas 上のピクセルデータを取れるようになっている。

ところが、他ドメインの画像を引数に drawImage() を使って描画を一度でも行なってしまうと、データを取ることができなくなる。

<html>
<head>
<title>test</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
    var img = new Image();
    img.src = "http://a1.twimg.com/profile_images/801507702/img_bigger.jpg";
    $(img).load(function() {
        var canvas = $("#dummy").get()[0];
        canvas.width = img.width;
        canvas.height = img.height;
        var ctx = canvas.getContext("2d");
        // オフスクリーンイメージを描画する
        ctx.drawImage(img, 0, 0);
        // 次でエラーとなる
        ctx.getImageData(0, 0, img.width, img.height);
    });
});
</script>
</head>
<body>
<canvas id="dummy" style="position:absolute; left: 0px; top:0px; width:0; height:0"></canvas>
</body>
</html>

よくよく調べてみると、詳しくは 4.8.11.3 Security with canvas elements に記載されていた。

なんとかして、JSONP のようにクロスドメイン制約をバイパスすることはできないもんだろうか。