ImageDataキャンバス上ではなく、通常の DOM ツリーのどこかにある画像からオブジェクトを取得することは可能<img>ですか?
はいの場合、どのように？
質問する
60870 次
3 に答える
73
メモリ内キャンバスを作成してから、このキャンバスに画像を描画する必要があります。
var canvas = document.createElement('canvas');
var context = canvas.getContext('2d');
var img = document.getElementById('myimg');
canvas.width = img.width;
canvas.height = img.height;
context.drawImage(img, 0, 0 );
var myData = context.getImageData(0, 0, img.width, img.height);
ただし、画像が別のドメインからのものである場合、これは機能しません。これは、サーバーを制御できない場合は回避できないセキュリティ制限です (html ファイルを file:// で開くと、多くの制限が追加されることに注意してください。http:// を使用してください)。
于 2012-05-25T13:09:04.520 に答える
22
すでに暗示されているように、canvas は ImageData オブジェクトを作成するための唯一のソリューションを提供します。
キャンバス要素を使用して画像データをロードすることに本当に反対している場合 (おそらく lte IE8 について話している場合)、画像オブジェクトの src ロケーションを使用して base64 画像データを解析することを常に検討できます。
http://blog.calyptus.eu/seb/2009/05/png-parser-in-javascript/
難しいですが、必要に応じて、この方法で画像を配列に解析できる可能性があります。
https://github.com/devongovett/png.js/blob/master/png.js
これは、xhr リクエストを使用してデータをロードし、png データを解析する方法を示しています。内部的には他の目的でキャンバスを使用しますが、関心のあるサブセットはキャンバス フリーです。関心のある各画像形式について、同様の実装に従う必要があります。
画像ピクセルの読み取り制限は、セキュリティの観点からは同じであることに言及する必要があります。キャンバスの有無にかかわらず、サードパーティから取得したピクセルを読み取ることはできません。XMLHTTPRequest は、クロスドメイン ポリシーのガバナンスにバインドされます。これにより、ユーザーの機密情報を含む可能性のある画像を含むサード パーティのコンテンツがスクリプトによって盗まれるのを防ぎます。
サード パーティのドメイン (表示するのに認証を必要としない) で画像を読み取る必要がある場合は、ドメインで画像プロキシ サーバーを実行して、同じドメインで画像を要求できるようにする必要があります。面倒な場合は、最初に画像データを json 配列として単純に提供する方が簡単かもしれません。
于 2012-05-25T13:55:40.363 に答える