1

私は と で作業しようとしていjCropますcanvas。

画像をサーバーに送信し、トリミングされた画像で再度送信する代わりに、キャンバスを使用して直接トリミングしようとしています。その結果、トリミングを base64 画像に変換してサーバーに送信するためです。

私はJSFiddle の例を持っています。

画像をトリミングしてからキャンバスに変換しますが、base64 で画像を変換できません。以下のエラーが表示されます。

"SecurityError: The operation is insecure."

私は..で試しました

console.log(canvas.toDataURL());

私は何を間違っていますか？

4

2 に答える 2

0

私はこの問題を抱えていました。問題は、キャンバスに何かが既にある場合に、その上に何か他のものを置くと、それが汚れてしまうことです。私の回避策は、キャンバス要素を削除して置き換え、新しい画像を配置することでした。

于 2014-01-16T20:22:01.687 に答える
0

一般に、この問題は、CORS (クロスオリジン リソース共有) の要件が満たされていないことが原因です。

これを回避するには、次のいずれかを実行できます。

  • ページと同じオリジンからトリミングされた画像を提供する
  • crossOrigin画像にプロパティを指定して、クロスオリジンの使用をリクエストします
  • プロキシを使用して、サーバーを介して外部サイトから画像を提供します (この場合、すべてをローカルで行うことで多くのポイントが失われます)。

加えて：

  • テストするときは、ローカルfile://プロトコルを使用せず、軽いローカル サーバー (つまり、Mongoose )を使用します。

toDataURLそうしないと、 (または)を使用するたびにセキュリティ エラーが発生しますgetImageData。

外部サーバーからの CORS 使用のリクエストについて: そのような使用のみをリクエストできますが、許可を与えるかどうかはサーバー次第です。

次のいずれかをリクエストするには:

<img src="..." crossOrigin="anonymous" >

または JavaScript から:

var img = new Image;

img.onload = handleOnLoad;
img.crossOrigin = 'anonymous';
img.src = '...';

拒否された場合、画像はまったく読み込まれません。

于 2013-10-30T18:18:52.883 に答える