Добавление изображения на холсте от компьютера


Я использую fabric.js для добавления изображений на холсте с моего компьютера. Я интересно, если есть более рациональный способ сделать это, чем то, что я использую. Мой код выглядит так:

// Initializing Fabric Canvas

var canvas = new fabric.Canvas("c");
canvas.setHeight(616);
canvas.setWidth(446);

// New Photo to Canvas
document.getElementById('addimg').onchange = function handleImage(e) {
  var reader = new FileReader();
  reader.onload = function(event) {
    var imgObj = new Image();
    imgObj.src = event.target.result;
    imgObj.onload = function() {
      var image = new fabric.Image(imgObj);
      image.set({
        left: 10,
        top: 10,
      }).scale(0.2);
      canvas.add(image);
    };
  };
  reader.readAsDataURL(e.target.files[0]);
};
#addimg {
 position: relative;
 overflow: hidden;
 cursor: pointer;
 }
 
input {
 position: absolute;
 font-size: 50px;
 opacity: 0;
 right: 0;
 top: 0;
 cursor: pointer;
 }
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.7.22/fabric.min.js"></script>
<div class="file btn btn-sm btn-dark" id="addimg">
  Add Image
  <input type="file" name="file" />
</div>

<canvas id="c"></canvas>



490
1
задан 12 февраля 2018 в 06:02 Источник Поделиться
Комментарии