画像の指定箇所に四角を表示する方法

Question

前提・実現したいこと

javascriptを用いて画像の中の指定した場所に四角枠を記入したいと考えてます。
大量の画像をこのように表示したいので、
保存メモリの関係上、元画像に枠を付けたものを保存することはしたくありません。
元画像の大きさで四角を記入したい左上の点の場所と幅と高さは取得できています。

やりたいこと

やり方をネットで調べたりはしているのですが
検索の方法が悪いのか出てきません。

説明がわかりにくく申し訳ありませんが
どなたかご存知の方がいらっしゃったら教えていただきたく思います。

以下追記

もう少し具体的にやりたいことをお伝えいたします。
下記の表のように、対象の箇所を枠で囲んで、それが何かを隣のセルに表示するようなことをしたいと考えています。
画像ごとに大きさや枠を表示する場所が違ってきます。そのやり方がわからなくて質問させていただきました。

Comments

[defghi1977]

もう少し具体的なシチュエーションを提示していただけると、より適切な回答が得られると思います.

[defghi1977]

赤い枠を動かす操作はありますか？

[ttmm]

表を表示した後ということですか？表示後はないです。

Answer 1

JavaScriptを使ってよいのであれば, どうとでも出来るとしか. 例えば次のような方法が考えられるでしょう.

• img要素に何らかの要素(div等)をposition:absolute等で重ねる
• canvas要素に画像を描画し, その上にstrokeRectで四角を描画する.
• 画像をインラインSVGで表示し, rect要素の位置を操作する.

赤い枠を動かす操作はありますか？

表を表示した後ということですか？表示後はないです。

とのことでしたら, インラインSVGによる方法がシンプルで良いかと思います.

<svg width="200px" height="200px" viewBox="0 0 300 400"><!--viewBoxには画像のサイズを指定する-->
  <image xlink:href="a.jpg" width="100%" height="100%"/>
  <rect x="50" y="100" width="50" height="100" 
    fill="none" stroke="red" stroke-width="2" vector-effect="non-scaling-stroke" shape-rendering="crispEdges"/><!--枠の位置を指定する-->
<svg>

Comments

[ttmm]

詳しく教えていただきありがとうございます。無事できそうです。

Answer 2

canvasを使ったやり方が一番最初に頭に浮かんだので、canvasでやってみました。

defghi1977さんがおっしゃる通り、canvas以外にもcssやsvgでも大丈夫です！

https://codepen.io/anon/pen/yKgXqX

<canvas id="canvas" width="250" height="250"></canvas>

var images = [
  // 画像1
  {
    url: 'http://via.placeholder.com/250x250',
    borderTop: 70,
    borderLeft: 50,
    borderWidth: 150,
    borderHeight: 100
  },
  // 画像2...
]

window.onload = function() {
    var canvas = document.getElementById("canvas");
    var context = canvas.getContext("2d");
  
    var img = document.createElement('img');
    img.src = images[0].url;
    context.drawImage(img, 0, 0);
  
    context.strokeStyle="#FF0000";
    context.strokeRect(
      images[0].borderLeft, 
      images[0].borderTop, 
      images[0].borderWidth, 
      images[0].borderHeight
    );
};

Answer 3

svgで処理してみてはどうでしょうか？

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="100" height="100">
<image xlink:href="hoge.jpg" width="100" height="100" x="0" y="0" />
<rect width="50" height="50" stroke="red" stroke-width="3" fill-opacity="0" x="10" y="20"/>
</svg>