JavaScript - 画像をキャンバスにドラッグします

Question

誰かこの効果を手伝ってくれませんか?右側の画像をキャンバスにドラッグして編集できます。これはどのように実現されていますか?詳しく説明してもらえますか?至急

Answer 1

ドラッグしてドラッグ アンド ドロップ API を見てください。

写真の編集について、このサイトを見てみると、いわゆる「キャンバス」というのはキャンバスではなく、普通のPレイヤーのことだと分かりました。実際、これは私が自分で実装した単純な画像エディターとほぼ同じです。アイデアは次のとおりです:

1. 操作の対象は写真(img)です

2. ズームインや回転など、すべての操作を記録する必要があります

3. 画像を出力したい場合は、上記のすべての画像を順番にアニメーション化し、キャンバスに描画して、画像を保存することができます

4. HTMLを出力する場合は、上記のすべての画像の各操作をCSSスタイルにマッピングするだけです

Answer 2

ドラッグアンドドロップの場合は、ターゲットオブジェクトとソースオブジェクトのイベント処理を備えたドラッグアンドドロップAPIを使用しますが、編集の意味がわかりません