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

Question

Можно ли скопировать (Ctrl + C) и вставить (Ctrl + V) изображение из пользовательской системы (рабочий стол или любую папку) на холст, используя fabric.js. Я видел программу копирования и вставки внутри холста, я нашел это Example во время поиска google, но не нашел подходящего примера для рабочего стола на холсте. Вот фрагмент кода для копирования и вставки

function onKeyDownHandler(event) { 
    //event.preventDefault(); 

    var key; 
    if(window.event){ 
     key = window.event.keyCode; 
    } 
    else{ 
     key = event.keyCode; 
    } 

    switch(key){ 
     ////////////// 
     // Shortcuts 
     ////////////// 
     // Copy (Ctrl+C) 
     case 67: // Ctrl+C 
      if(ableToShortcut()){ 
       if(event.ctrlKey){ 
        event.preventDefault(); 
        copy(); 
       } 
      } 
      break; 
     // Paste (Ctrl+V) 
     case 86: // Ctrl+V 
      if(ableToShortcut()){ 
       if(event.ctrlKey){ 
        event.preventDefault(); 
        paste(); 
       } 
      } 
      break;    
     default: 
      // TODO 
      break; 
    } 
} 


function ableToShortcut(){ 
    /* 
    TODO check all cases for this 

    if($("textarea").is(":focus")){ 
     return false; 
    } 
    if($(":text").is(":focus")){ 
     return false; 
    } 
    */ 
    return true; 
} 

function copy(){ 
    if(canvas.getActiveGroup()){ 
     for(var i in canvas.getActiveGroup().objects){ 
      var object = fabric.util.object.clone(canvas.getActiveGroup().objects[i]); 
      object.set("top", object.top+5); 
      object.set("left", object.left+5); 
      copiedObjects[i] = object; 
     }      
    } 
    else if(canvas.getActiveObject()){ 
     var object = fabric.util.object.clone(canvas.getActiveObject()); 
     object.set("top", object.top+5); 
     object.set("left", object.left+5); 
     copiedObject = object; 
     copiedObjects = new Array(); 
    } 
} 

function paste(){ 
    if(copiedObjects.length > 0){ 
     for(var i in copiedObjects){ 
      canvas.add(copiedObjects[i]); 
     }      
    } 
    else if(copiedObject){ 
     canvas.add(copiedObject); 
    } 
    canvas.renderAll();  
} 

Можно ли сделать на самом деле я слышал Дат это может не possible.Can кто наставит меня, как это сделать, пожалуйста.

Answer 1

Если вы ориентируетесь современные браузеры вы можете объединить 2 новых (но широко принят) html5 особенности выполнить свою задачу:

1. Вы можете создать Dropzone на странице с помощью dragover и drop события.

2. Затем вы можете использовать API FileReader для чтения файлов изображений в объект изображения.

3. Затем он возвращается к FabricJS для загрузки изображения, как обычно.

Вот учебник, описывающий, как сделать жесткие биты (# 1, # 2): http://www.html5rocks.com/en/tutorials/file/dndfiles/

[Добавлен код, который ИНОГДА позволяет вырезать/вставить графических файлов]

Мост современные браузеры поддерживают привязку события «paste».

// listen for the paste event 
window.addEventListener("paste",pasteImage); 

Но ... !!

Поддержка нетекстовых мим-типов (т.е. изображений) недостаточна. Chrome, похоже, поддерживает его «выключено» и «включено».

... И браузеры постоянно пересматривают свои возможности вырезания/вставки из-за проблем безопасности.

Вот код, который иногда работает в Chrome.

// listen for the paste event 
window.addEventListener("paste",pasteImage); 

function pasteImage(event) { 

    // get the raw clipboardData 
    var cbData=event.clipboardData; 

    for(var i=0;i<cbData.items.length;i++){ 

     // get the clipboard item 
     var cbDataItem = cbData.items[i]; 
     var type = cbDataItem.type; 

     // warning: most browsers don't support image data type 
     if (type.indexOf("image")!=-1) { 
      // grab the imageData (as a blob) 
      var imageData = cbDataItem.getAsFile(); 
      // format the imageData into a URL 
      var imageURL=window.webkitURL.createObjectURL(imageData); 
      // We've got an imageURL, add code to use it as needed 
      // the imageURL can be used as src for an Image object 
     } 
    } 
}