Canvas のセキュリティモデルでちょっとはまった件 (2)
画像を data URI にして、JSONP で返すプロキシを appengine 上に載せてなんとかしのいでみた。
<html> <head> <title>DCT</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() { $.ajax({ url:"http://to-data-uri.appspot.com/", dataType: "jsonp", data:{url:"http://a1.twimg.com/profile_images/801507702/img_bigger.jpg"}, success:function(data) { var img = new Image(); img.src = data.result; $(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); var data = ctx.getImageData(0, 0, img.width, img.height); alert(data.data.length == data.width * data.height * 4); }); } }); }); </script> </head> <body> <canvas id="dummy" style="position:absolute; left: 0px; top: 0px; width: 0px; hjeight: 0px"></canvas> </body> </html>
プロキシのソースはこちら。