javascript - サーバー側の画像を、canvas要素のストレートjs​​を使用してユーザー定義の「フレーム」にロードする必要があります-

Question

ユーザーが長方形をストロークできるキャンバスがあります-この新しく描画された長方形が、dbから入ってくる画像の宛先座標になる必要があります

javaScript jediの1人が、私のパダワン問題への最も論理的なアプローチをすばやく高レベルのアウトラインまたは擬似コード化することを期待しています。「助けてください[ここにあなたの名前]、あなたは私の唯一の希望です。」今やめています。

Answer 1

これを処理する方法は、宛先（x、y）にマウスイベントハンドラーrect.startXとrect.startYを使用し、宛先w/hにrect.widthとrect.heightを使用することでした。

document.getElementById("image").onclick= function() {
    context.drawImage(image,rect.startX,rect.startY,rect.w,rect.h);
};

サーバーからの画像は、「image-prepper」関数で処理されます。この関数は、表示されているキャンバスに呼び出されるまで、画像をオフスクリーンキャンバスにロードします。