0

ブラウザでローカルに画像を回転させ、ローカルに保存する方法を探しています。

canvasとjQueryの回転で画像を回転させてみました。ただし、ブート メソッドでは、イメージはビュー内で回転するだけです。これらの画像 (例: canvas.toDataURL()) を保存するとすぐに、元のファイル/ローテーションが取得されます。

PHP/サーバー側の相互作用なしでブラウザでローカルに画像を回転させる方法はありますか?

ありがとう！

$("#Img").rotate(90);
var dataURL5 = document.getElementById('Img').src;

-->dataURL5回転した画像は含まれていませんが、元の画像が含まれています...ブラウザには回転したビューがあります....

またはキャンバスで：

context_tmp.translate(canvas_tmp.width , canvas_tmp.height /canvas_tmp.width );
context_tmp.rotate((Math.PI/2));

キャンバスは必須ではありません...試しただけです...

起動中

4

1 に答える 1

1

メソッドを使用してキャンバスから画像を抽出する必要がありますtoDataURL()。

srcプロパティから画像データを抽出することはできません(元の URL は除く)。

注: 元の画像がページとは異なるオリジンからのものである場合、CORS が開始されるため、これは機能しません (クロスオリジン リソース共有)。これは、設計と意図によるものです。

コンテキストを使用してキャンバスを作成し、画像を描画する必要がありrotateます。translateこれで、画像データを取得するために呼び出すことができますtoDataURL()(CORS が開始された場合、画像は空白になります)。

例：

/// translate so rotation happens at center of image
ctx.translate(image.width * 0.5, image.height * 0.5);

/// rotate canvas context
ctx.rotate(0.5 * Math.PI); /// 90deg clock-wise

/// translate back so next draw op happens in upper left corner
ctx.translate(-image.width * 0.5, -image.height * 0.5);

/// image will now be drawn rotated
ctx.drawImage(image, 0, 0);

/// get the rotated image (unless CORS kicks in...)
var dataUri = canvas.toDataURL();

私はこのコードをいじりましたが、CORSは私が使用している画像に効果的であるため、無意味ですが、とにかく-ここに行きます.

于 2013-08-20T20:12:56.680 に答える