編集: を考慮にdennmatの提案を取って、私はImage()
を使用して数行までスクリプトを取得し、私の画像を簡単にするために管理している:XDomainRequestを使用してバイナリデータを正しく読み取ることはできますか?
window.onload = function(){
var img;
capture_canvas = document.createElement('canvas');
capture_canvas.width = 1000;
capture_canvas.height = 1000;
document.documentElement.appendChild(capture_canvas);
img = new Image();
img.crossOrigin = "Anonymous";
img.src = "http://www.shangalulu.com/get_resource_no_64.php?url=http://www.shangalulu.com/users/1196739508/post/41-1330377498/41-1330377498_thumb.jpg";
img.onload = function() {
var context, canvas_img;
context = capture_canvas.getContext('2d');
context.drawImage(img, 0, 0, 255, 255);
canvas_img = context.getImageData(0, 0, capture_canvas.width, capture_canvas.height);
}
}
これはChromeとFirefoxのために動作しますが、これはIE9のためにしません。次のリンクに記載されている解決策はこのような状況には当てはまりません。 Uncaught Error: SECURITY_ERR: DOM Exception 18 when I try to set a cookie
Image()
のcors機能はIE9でサポートされていますか?
私はちょっとした問題に遭遇しました。
上記画像は、実際には0まで255から行く255バイト(2回)、続いて、標準的なPNG形式のヘッダーを含むファイルです。このアイデアは、Internet Explorer 9がAJAXリクエストを介してバイナリデータを受け取る方法を確認することでした。
これは私の問題です:私は127より大きいクライアント上のバイトを受け取ったとき、値はデフォルトで253になっています。IEに拡張バイトを正しいものと読み込ませる方法はありますか値?
のノートを取るためにいくつかのこと:私たちは、JavaScriptのフレームワークの任意の並べ替えを使用していない
1)。これは、私たちが裸の骨のjavascriptでのみ行う必要があります。
2)この実験の目的は、画像を得るためのきれいな方法を作り、それを汚すことなくキャンバスに置くことです。時にはこれらのイメージは外部からホストされているイメージサーバーから来ますが、他のホストからは私たちが制御できない場合もあります。以下に添付
は私のテストスクリプトです:
残念ながらvar request;
window.onload = function(){
request = new XMLHttpRequest();
if (window.XDomainRequest) {
request = new XDomainRequest();
}
request.open('GET',
"http://www.shangalulu.com/get_resource_no_64.php?url=
http://www.shangalulu.com/resources/images/sample/sample.png", true);
request.onload = function()
{
var binary, i, response;
response = this.responseText;
binary = "";
if (this.contentType)
{
document.documentElement.appendChild(
document.createTextNode(this.contentType));
document.documentElement.appendChild(document.createElement('br'));
}
for(i=0; i < response.length; i++) {
binary = "Line " + (i) + " --> " + ((response.charCodeAt(i)) & 0xff);
document.documentElement.appendChild(document.createTextNode(binary));
document.documentElement.appendChild(document.createElement('br'));
}
};
request.send();
}
'Image()'の何が問題なのですか?例を参照してください:https://developer.mozilla.org/en/Canvas_tutorial/Using_images – dennmat
あなたは本質的に、組み込みのブラウザを使わずにJSで画像データを操作、管理、描画しようとしています。それのためのユーティリティ。それは本当に遅くなるでしょう、そして、あなたが透明性と回転に入ると、特に無数の問題に遭遇するでしょう。 – dennmat
Image()を最後に見たときにクロスオリジンサポートを見逃しているに違いありません。ヒントをありがとう! 私の足を撃たれたとして、私はブラウザの内蔵ユーティリティが何を意味するかは完全にはわかりません。私がここでやろうとしているのは、単純なイメージをキャンバスにレンダリングしてサーバーに送信することだけです。 – Axle