ASP.netによるWebアプリで表示した画像の上に枠を配置したい

タグの編集
投稿者 K  (社会人) 投稿日時 2023/9/5 08:48:47
Webアプリで表示した画像上に枠を作成して登録したいです。

イメージは下記のサイトのような感じです。
フォームのアプリでは実現できました。
枠の座標位置をデータベースに登録で考えています。
実現可能でしょうか?
https://qiita.com/yaju/items/146bc8fed9e7f043f6c2
投稿者 魔界の仮面弁士  (社会人) 投稿日時 2023/9/5 10:10:08
一口に Web アプリと言っても、フロントエンドのフレームワークは沢山ありまして…。
現在がどういう作りになっているか分からないと回答しにくいです。

固定的な枠線だけであれば、CSS で枠線を縁取った <div> タグを
画像座標に重ね合わせて配置すれば充分かもしれません。

一方、提示されたサンプル動画にあるように、マウスドラッグで描画することが目的の場合は、
基本的にはサーバーサイドでは無く、クライアント側の処理で行うことを検討してください。
HTML5 なら、<canvas> オブジェクトに対して mousedown / mousemove / mouseup イベントで
座標を指定して描画パスを構築します。
https://forse.hatenablog.com/entry/2014/07/05/151405
https://www.tohoho-web.com/html/memo/canvas-2d.htm
https://web-designer.cman.jp/javascript_ref/mouse/linedraw/
投稿者 魔界の仮面弁士  (社会人) 投稿日時 2023/9/5 11:40:01
canvas タグに対する描画例を置いときます。
マウス操作はとりあえず置いといて、座標を指定した静的な描画ですが。
https://codepen.io/benshi-orator/pen/LYMRoNR

ここでは二次元画像なので .getContext('2d') を使っていますが、
三次元の場合は .getContext('webgl') を使えます。