Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!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.4.1.js"
  integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU="
  crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/paper.js/0.12.2/paper-full.js"></script>
</head>
<body>
  <input id="url" type="text" placeholder="画像URLを貼付">
  <input id="file" type="file" accept="image/*">
  <div id="view">
    <div id="draw">
      <canvas id="img"></canvas>
      <script type="text/paperscript" canvas="pen">
        var hitOptions = Object.seal({
          segments: true,
          stroke: false,
          fill: false,
          tolerance: 10
        });
        var path = null;
        function onMouseDown(e) {
          var hitSeg = project.hitTest(e.point.clone(), hitOptions);
          var isClose = path != null
              && path.segments.length > 2
              && hitSeg
              && hitSeg.type === 'segment'
              && hitSeg.item.firstSegment === hitSeg.segment;
          if (isClose) {
            path.closed = true;
            path = null;
            return false;
          }
          if (path == null) {
            path = new Path();
            path.selected = true;
            path.add(e.point);
          }
          else {
            path.add(e.point);
          }
        } 
      </script>
      <canvas id="pen" width="720" height="600"></canvas>
    </div>
    <button id="reset">リセット</button>
  </div>
</body>
</html>
 
$(function () {
  
  //リセットボタン
  $('#reset').click(function () {
    $('#view').fadeOut();
    $('#url')[0].value = '';
    $('#file')[0].value = '';
    $('#pen').value = '';
  });
  
  $('#url').change(function () {
    $('#view').fadeOut(1);
    $('#file')[0].value = '';
    $('#view').fadeIn();
    input(this.value);
  });
  $('#file').change(function () {
    $('#view').fadeOut(1);
    $('#url')[0].value = '';
    $('#view').fadeIn();
    var fr = new FileReader();
    fr.onload = function (e) {
      input(e.target.result);
    };
    fr.readAsDataURL(this.files[0]);
  });
  function input(e) {
    var img = new Image();
    img.onload = draw;
    img.src = e;
  }
  function draw(e) {
    var img = e.target;
    var imgcnv = $('#img');
    var imgH = 800;
    var imgW = img.naturalWidth * imgH / img.naturalHeight;
    imgcnv.attr('width', imgW);
    imgcnv.attr('height', imgH);
    var ctx = imgcnv[0].getContext('2d');
    ctx.drawImage(img, 0, 0, imgW, imgH);
    $('#img').width('100%');
    $('#img').height('100%');
    var penW = $('#img').width();
    var penH = $('#img').height();
    var pencnv = $('#pen');
    pencnv.attr('width', penW);
    pencnv.attr('height', penH);
    }
  });
Output 300px

This bin was created anonymously and its free preview time has expired (learn why). — Get a free unrestricted account

Dismiss x
public
Bin info
anonymouspro
0viewers