0

このチュートリアルで行われているのと同様の方法で、kineticjs キャンバスの画像を生成しようとしています。(例とは異なり、キャンバスにはローカル サブディレクトリの画像が含まれています。)

ただし、次のことを認識しています。

toDataURL() メソッドでは、キャンバスに描画されるすべての画像が、それを実行するコードと同じドメインの Web サーバーでホストされている必要があります。この条件が満たされない場合、SECURITY_ERR 例外がスローされます。

ただし、ローカルの html ページで画像を生成できる必要があります。または他の画像生成方法を使用して、上記のセキュリティ要件を回避する方法はありますか?toDataURL

4

1 に答える 1

1

Web から取得した任意の画像を Kinetic.Image のソースとして使用できます。

したがって、その画像をローカルの HTML ページに表示できます。

できないことは、その Web ページを toDataURL を使用して画像としてエクスポートすることです。

また、context.getImageData を使用してピクセル配列を調べることもできません。

四角形/円/その他を描いているだけで、外部画像がない場合は、問題ありません。

Web イメージをダウンロードしてローカル ドライブに保存すると、そのイメージはまだ "ダーティ" であり、セキュリティ エラーが発生します (ローカル マシン上にあっても)。

回避策:

これは時々機能します：

Web から画像を取得し、Photoshop で変更して、そのファイルを使用する kinetic .html ファイルと同じディレクトリに新しいファイルとして保存します。 これにより、多くの場合、画像から「ダーティ」フラグが削除されます。

または、ローカル マシンに Web サーバーをインストールすることもできます (最近では大したことではありません)。IISまたはWAMPを考えています。

Internet Explorer を避けたい場合は、イメージへのクロスオリジン アクセスを許可するサイトでイメージをホストできます。そのようなホスティング サイトの 1 つが dropbox.com です。次に、crossOrigin フラグを「anonymous」に設定して画像をロードすると、結果の画像は「ダーティ」になりません。

var img=new Image();
img.onload= ...
img.crossOrigin="anonymous";
img.src="yourDropboxImage.png";
于 2013-09-14T16:55:43.920 に答える