Как добавить несколько изображений с локального диска на холст с помощью Fabric.js?

Question

Я создаю приложение Image Collage в HTML5 canvas с использованием Fabric.js. Я хочу, чтобы этот пользователь мог перетащить файл в «область перетаскивания файлов», а также он может «выбрать файл» с его локального диска. Пожалуйста, помогите мне в реализации этого.

Я использую этот код для добавления нескольких изображений. Теперь я хочу добавить изображения с моего локального диска на холст.

//Image 1 
fabric.Image.fromURL('/3.jpg', function (img) { 
     var oImg = img.set({ left: 300, top: 300, angle: -15 }).scale(0.9); 
     canvas.add(oImg).renderAll(); 
     canvas.setActiveObject(oImg); 

    }); 

//Image 2 
fabric.Image.fromURL('/bokeh.jpg', function (img) { 
     var oImg = img.set({ left: 300, top: 300, angle: -15 }).scale(0.9); 
     canvas.add(oImg).renderAll(); 
     canvas.setActiveObject(oImg); 
    }); 

Answer 1

Эй У меня есть решение для перетаскивания и выбрать файл, но не в одном ответе на самом деле у меня есть два различных отдельных решений перетаскивания: http://jsfiddle.net/rodrigopandini/gj7HT/

Выберите файл:

<input type="file" id="imgLoader"> 

    <canvas id="c" width="300" height="300"></canvas> 
<script src="https://raw.github.com/kangax/fabric.js/master/dist/all.js"> </script> 
<script type="text/javascript> 
canvas = new fabric.Canvas('c'); 

document.getElementById('imgLoader').onchange = function handleImage(e) { 
    var reader = new FileReader(); 
    reader.onload = function (event) { console.log('fdsf'); 
     var imgObj = new Image(); 
     imgObj.src = event.target.result; 
     imgObj.onload = function() { 
      // start fabricJS stuff 

      var image = new fabric.Image(imgObj); 
      image.set({ 
       left: 250, 
       top: 250, 
       angle: 20, 
       padding: 10, 
       cornersize: 10 
      }); 
      //image.scale(getRandomNum(0.1, 0.25)).setCoords(); 
      canvas.add(image); 

      // end fabricJS stuff 
     } 

    } 
    reader.readAsDataURL(e.target.files[0]); 
} 
</script> 

U может попробовать использовать эти коды в одном скрипте.