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>test</title>
  </head>
  <body>
    <input id="file" type="file" accept="image/*">
    <div id="view">
      <div id="cnvArea">
        <canvas id="c" width="700"></canvas>
      </div>
      <div id="optArea">
        <input type="range" id="value" value="0.5" min="0" max="1" step="0.01">
        <br>
        <button>a</button>
        <button>b</button>
        <button>c</button>
        <button>d</button>
      </div>
    </div>
    <script src="https://code.jquery.com/jquery-3.1.0.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/3.3.2/fabric.min.js"></script>
    </body>
</html>
 
$('#file').on('change', function () {
    $('#view').fadeIn();
    var fr = new FileReader();
    fr.onload = function (e) {
        input(e.target.result);
    };
    fr.readAsDataURL(this.files[0]);
});
​
var canvas = new fabric.Canvas('c');
​
var input = function (url) {
    fabric.Image.fromURL(url, function (img){
      var wS = canvas.width / img.width;
      img.scale(wS);
      canvas.setHeight(img.height * wS);
      canvas.clear();
      canvas.add(img).renderAll();
      img.selectable = false;
    });
};
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers