fabric.js를 사용하여 pc (사용자 시스템)에서 캔버스로 이미지를 끌어다 놓습니다.

Question

안녕하세요, PC (사용자 시스템)에서 fabric.js를 사용하여 html5 캔버스로 이미지를 끌어서 놓아야하는 프로젝트에서 일하고 있습니다. div에 대한 코드 (캔버스에 드롭 다운으로 표시)가 있지만 캔버스에 PC (사용자 시스템)를 쳤을 때 아무에게도 더 진행 방법을 알려 줄 수 없습니다. 여기

는 이미 http://www.html5rocks.com/en/tutorials/file/dndfiles/이 사용하려고 지금까지

var js_c_drawing, activeObject = null; 
     $(document).ready(function() { 
      setDrawingCanvasCoords(); 
      js_c_drawing = new fabric.Canvas('c_drawing'); 
      js_c_drawing.calcOffset(); 
      if (typeof fabric.instances != "undefined") fabric.instances.push(js_c_drawing); 
     }); 
     function setDrawingCanvasCoords() { 
      var wHeight = $(window).height() - 100; 
      var wWidth = $(window).width() - 164; 
      var drawingStyle = 'border:4px solid gray;top:20px;position:relative;background-color:black;' + 'width:' + wWidth + 'px; height:' + wHeight + 'px'; 
      $("#divDrawing").attr('style', drawingStyle); 
     }  
     function showToolMenu(shapeMenu) { 
      var divShapesId = 'divShapes'; 
      var divElement = $('#' + divShapesId); 
      var ele = document.getElementById('a' + shapeMenu); 
      elePosition = findPos(ele); 
      document.getElementById(divShapesId).style.left = elePosition[0] + 'px'; 
      document.getElementById(divShapesId).style.top = elePosition[1] + (ele.offsetHeight) + 'px'; 
      document.getElementById(divShapesId).style.zIndex = 100; 
      divElement.show(); 
      var url = baseurl + shapeMenu; 
      $(divElement).load(url); 
     } 
     function hideToolMenu() { 
      var divShapesId = 'divShapes'; 
      var divElement = $('#' + divShapesId); 
      document.getElementById(divShapesId).style.zIndex = 20; 
      divElement.hide(2000); 
     } 
     function findPos(obj) { 
      var curleft = curtop = 0; 
      if (obj.offsetParent) { 
       curleft = obj.offsetLeft 
       curtop = obj.offsetTop 
       while (obj = obj.offsetParent) { 
        curleft += obj.offsetLeft 
        curtop += obj.offsetTop 
       } 

      } 
      return [curleft, curtop]; 
     } 

내가했던 코드이지만 이미지 크기 등을 보여주고 내가 http://jsfiddle.net/natchiketa/w8kkc/ PC (사용자 시스템)과는 상관이 코드를 시도하고있다 캔버스지만 실패했습니다.

Answer 1

마지막으로 위의 두 링크를 사용하여 http://jsfiddle.net/rodrigopandini/gj7HT/ 해결책을 얻었습니다. 다음은 코드입니다

function handleDragStart(e) { 
    [].forEach.call(images, function (img) { 
     img.classList.remove('img_dragging'); 
    }); 
    this.classList.add('img_dragging'); 
} 

function handleDragOver(e) { 
    if (e.preventDefault) { 
     e.preventDefault(); // Necessary. Allows us to drop. 
    } 

    e.dataTransfer.dropEffect = 'copy'; // See the section on the DataTransfer object. 
    // NOTE: comment above refers to the article (see top) -natchiketa 

    return false; 
} 

function handleDragEnter(e) { 
    // this/e.target is the current hover target. 
    this.classList.add('over'); 
} 

function handleDragLeave(e) { 
    this.classList.remove('over'); // this/e.target is previous target element. 
} 

function handleDrop(e) {  
    // this/e.target is current target element. 

    /* 
    if (e.stopPropagation) { 
     e.stopPropagation(); // stops the browser from redirecting. 
    } 
    */ 

    e.stopPropagation(); // Stops some browsers from redirecting. 
    e.preventDefault(); // Stops some browsers from redirecting. 

    // handle desktop images 
    if(e.dataTransfer.files.length > 0){ 

     var files = e.dataTransfer.files; 
     for (var i = 0, f; f = files[i]; i++) { 

      // Only process image files. 
      if (f.type.match('image.*')) {    
       // Read the File objects in this FileList. 
       var reader = new FileReader(); 
       // listener for the onload event 
       reader.onload = function(evt) { 
        // create img element 
        var img = document.createElement('img'); 
        img.src= evt.target.result;       

        // put image on canvas 
        var newImage = new fabric.Image(img, { 
         width: img.width, 
         height: img.height, 
         // Set the center of the new object based on the event coordinates relative to the canvas container. 
         left: e.layerX, 
         top: e.layerY 
        }); 
        canvas.add(newImage); 
       }; 
       // Read in the image file as a data URL. 
       reader.readAsDataURL(f); 
      } 
     } 
    } 
    // handle browser images 
    else{   
     var img = document.querySelector('#images img.img_dragging'); 
     var newImage = new fabric.Image(img, { 
      width: img.width, 
      height: img.height, 
      // Set the center of the new object based on the event coordinates relative to the canvas container. 
      left: e.layerX, 
      top: e.layerY 
     }); 
     canvas.add(newImage); 
    } 

    return false; 
} 

function handleDragEnd(e) { 
    // this/e.target is the source node. 
    [].forEach.call(images, function (img) { 
     img.classList.remove('img_dragging'); 
    }); 
} 

if (Modernizr.draganddrop) { 
    // Browser supports HTML5 DnD. 

    // Bind the event listeners for the image elements 
    var images = document.querySelectorAll('#images img'); 
    [].forEach.call(images, function (img) { 
     img.addEventListener('dragstart', handleDragStart, false); 
     img.addEventListener('dragend', handleDragEnd, false); 
    }); 
    // Bind the event listeners for the canvas 
    var canvasContainer = document.getElementById('canvas-container'); 
    canvasContainer.addEventListener('dragenter', handleDragEnter, false); 
    canvasContainer.addEventListener('dragover', handleDragOver, false); 
    canvasContainer.addEventListener('dragleave', handleDragLeave, false); 
    canvasContainer.addEventListener('drop', handleDrop, false); 
} else { 
    // Replace with a fallback to a library solution. 
    alert("This browser doesn't support the HTML5 Drag and Drop API."); 
}