53199


※いただいたコメントにより修正しました。

下記の機能を実装したwebサイトを制作したいです。

・画像URLを入力またはアップロードで取得した画像をブラウザに表示する  
・表示した画像にマウスカーソルをのせると、PhotoshopやIllustratorで言うところのペンツールのような機能を持った **ツールA**
※1に切り替わる  
・ **ツールA** で三角形以上の多角形を作ると、その多角形の内側を黒ベタに塗りつぶす  
・黒ベタが施された状態の画像※2を保存できるボタン  
※1： **ツールA** の動きは直線のみで、例えで出したペンツールに実装されているカーブ生成機能並びにカーブを調整するハンドルは不要です。  
※2：画像サイズとファイル形式は元画像のまま。

以上です。  
下図は上記の機能を分かりやすくするためと、使用手順を説明する趣意の図です。  
※下図において画像読込機能については都合により省略します。

[![画像の説明をここに入力](https://i.stack.imgur.com/20eBw.jpg)](https://i.stack.imgur.com/20eBw.jpg)

現状は画像読込機能のみ、HTML,css,jsで実装できました。  
下記サンプルです。  
<https://jsbin.com/fojaqedito/edit?html,js,output>  
しかし、その他の機能についてはどの言語で、どのように書けば実装できるのかが分からず困っています。  
できればHTML,css,jsで実装したいですが他言語でも構いません。  
ご助力お願いいたします。

[code]

    $(function () {
      
      //input url
      $('#url').change(function () {
        $('#main_file').fadeOut(1);
        $('#main_url').fadeIn(500);
        $('#view_url').prop('src', this.value);
        console.log(this.value);
        var file = $('#file')[0];
        file.value = "";
      });
      //input file
      $('#file').change(function (e) {
        var reader = new FileReader();
        reader.onload = function (e) {
        $('#main_url').fadeOut(1);
        $('#main_file').fadeIn(500);
        $('#view_file').prop('src', e.target.result);
        var url = $('#url')[0];
        url.value = "";
        }
        reader.readAsDataURL(e.target.files[0]);
      });
      
      //close
      $('.close').click(function () {
        $('.main').fadeOut();
        var url = $('#url')[0];
        url.value = "";
        var file = $('#file')[0];
        file.value = "";
      });
      
    });
[/code]

[code]

    .main{
      display: none
    }
[/code]

[code]

    <!DOCTYPE html>
    <html>
    <head>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width">
      <title>JS Bin</title>
      <script
      src="https://code.jquery.com/jquery-3.3.1.js"
      integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60="
      crossorigin="anonymous"></script>
    </head>
    <body>
      <!-- input URL -->
      <input id="url" type="text" placeholder="URLを入力">
      <!-- input file -->
      <input id="file" type="file" accept="image/*">
      <!-- output url -->
      <div id="main_url" class="main">
        <img id="view_url" class="view">
        <button class="save">保存</button>
        <button class="close">クリア</button>
      </div>
      <!-- outoput file -->
      <div id="main_file" class="main">
        <img id="view_file" class="view">
        <button class="save">保存</button>
        <button class="close">クリア</button>
      </div>
    </body>
    </html>
[/code]


CC BY-SA 4.0
2019-02-27T08:00:46.387
53065
2019-03-05T02:45:48.107
2019-03-03T21:56:13.593
32275
32275
question
javascript html jquery css
読み込んだ画像の範囲指定したところを黒く塗りつぶしたい


`<canvas>` で実装するのがベストかと思います。コードは大きくなりそうなので、方針だけ書きます。

  1. 指定された画像を `<canvas>` に描画する
  2. 範囲指定のUIを実装する。`click`イベントハンドラで座標を記録して線を描くなど。
  3. 範囲指定がおわったら、 
    1. 指定領域を黒く塗る
    2. [`toBlob()`](https://html.spec.whatwg.org/multipage/canvas.html#dom-canvas-toblob)で画像をエンコードする。
    3. エンコードが終わったら、[保存]ボタンを `<a download>`で作り、その href に [`URL.createObjectURL(blob)`](https://w3c.github.io/FileAPI/#dfn-createObjectURL) で生成したblob URLをセットする。

個々のステップの実装で疑問がでたら個別に質問を立てるとよいかと思います。


CC BY-SA 4.0
2019-03-05T02:45:48.107
53199
2019-03-05T02:45:48.107
3475
53065
answer