Skip to main content
本文に 2 文字追加
ソース リンク

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

画像の説明をここに入力

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

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

画像の説明をここに入力

本文から 1 文字削除
ソース リンク

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

※いただいたコメントにより、追記しました。

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

実装したい機能につい、より詳細に記載
ソース リンク

※いただいたコメントにより追記しました。

画像URL下記の機能読み込むか画像ファイル実装したwebサイト制作したいです。

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

サンプル
https://jsbin.com/dizesijadi/edit?html,js,output※2:画像サイズとファイル形式は元画像のまま。

このサンプルに以上です。
下図は上記の機能を実装させたい分かりやすくするため考え、使用手順を説明する趣意の図です。
※下図におい画像読込機能については都合により省略します。
画像の説明をここに入力画像の説明をここに入力

上図の現状は画像読込機能をhtmlのみ、HTML,css,jsで施したいの実装できました。
下記サンプルです
https://jsbin.com/fojaqedito/edit?html,js,output
しかし、その他の機能についてはどの言語で、どのように記述したらよいでしょうか書けば実装できるのかが分からず困っています
htmlできればHTML,css,jsと書きましたが、それだと不可能だとか効率が悪すぎるのあれば実装したいですが他言語でも大丈夫です構いません。
ご助力お願いいたします

$(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 = "";
  });
  
});
.main{
  display: none
}
<!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="paste 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">;close;クリア</button>
  </div>
  <!-- outoput file -->
  <div id="main_file" class="main">
    <img id="view_file" class="view">
    <button class="save">保存</button>
    <button class="close">;close;クリア</button>
  </div>
</body>
</html>

※いただいたコメントにより追記しました。

画像URL読み込むか画像ファイルをアップロードすると、読み込んだ画像をブラウザに表示するwebサイトを制作しています

サンプル
https://jsbin.com/dizesijadi/edit?html,js,output

このサンプルに下図の機能を実装させたい考えます。
画像の説明をここに入力

上図の機能をhtml,css,jsで施したいのです、どのように記述したらよいでしょうか
html,css,jsと書きましたが、それだと不可能だとか効率が悪すぎるのあれば他言語でも大丈夫です

$(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 = "";
  });
  
});
.main{
  display: none
}
<!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="paste 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="close">;close</button>
  </div>
  <!-- outoput file -->
  <div id="main_file" class="main">
    <img id="view_file" class="view">
    <button class="close">;close</button>
  </div>
</body>
</html>

※いただいたコメントにより追記しました。

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

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

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

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

$(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 = "";
  });
  
});
.main{
  display: none
}
<!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>
実装したい機能について、より詳細に記述
ソース リンク
読み込んでいます
本文に 54 文字追加
ソース リンク
読み込んでいます
ソース リンク
読み込んでいます