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

Можем ли мы скопировать (Ctrl+C) и вставить (Ctrl+V) изображение из пользовательской системы (рабочий стол/любая папка) на холст с помощью Fabric.js. Я видел программу копирования и вставки внутри холста, я нашел этот Пример при поиске в 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();    
}

Возможно ли это сделать на самом деле, я слышал, что это может быть невозможно. Может ли кто-нибудь помочь мне, как это сделать, пожалуйста.


person Cathy    schedule 19.06.2013    source источник


Ответы (1)


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

  1. Вы можете создать дропзону на своей странице, используя события dragover и drop.

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

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

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

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

Большинство современных браузеров поддерживают привязку события «вставить».

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

Но...!!

Поддержка нетекстовых MIME-типов (например, «изображение») недостаточна. 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
        }
    }
}
person markE    schedule 19.06.2013
comment
Спасибо за ваш ответ @markE Я уже проверил этот сайт. Можем ли мы использовать копирование и вставку ключевых слов из пользовательской системы на холст, по приведенной выше ссылке я пробовал перетаскивать, но она не работает должным образом. - person Cathy; 20.06.2013
comment
Добавлен код вырезания/вставки, который может работать в Chrome. Но обычно браузеры не позволяют вырезать/вставлять по соображениям безопасности. - person markE; 20.06.2013
comment
спасибо, так как у нас есть требование копировать и вставлять одновременно, перетаскивая, но основным приоритетом было только копирование / вставка. - person Cathy; 20.06.2013
comment
он показывает только код вставки, это enuf или следует писать код копирования также отдельно - person Cathy; 20.06.2013
comment
Часть копирования в буфер обмена обрабатывается операционной системой (клавиатура пользователя [Копировать] в файле изображения — например, Ctrl+C в Windows). Никакого кодирования не требуется с вашей стороны для копии. Этот код захватывает все, что было скопировано в буфер обмена, и пытается найти изображения. Опять же, поддержка браузерами этого кода вставки ограничена и временна. Кстати, какая проблема у вас была с ссылкой перетаскивания? (обычно он отлично работает в современных браузерах, кроме IE — ага, IE!). - person markE; 20.06.2013
comment
У меня нет никаких проблем, но клиент попросил нас сделать это, если копирование / вставка не работает, наш следующий шаг - сделать только перетаскивание. Я пробовал перетаскивать, но, похоже, это не работает должным образом. - person Cathy; 20.06.2013
comment
Да, как я и предупреждал, код вставки был «длинным шагом» из-за проблем с безопасностью браузера. То, что я получаю, — это метаданные для изображения, которое перетаскивается в зону перетаскивания «Перетащите файлы сюда». Метаданные: городской пейзаж.png (изображение/png) — 243324 байт, последнее изменение: 01.06.2013. Ваш опыт отличается? - person markE; 20.06.2013
comment
Я использую jsfiddle.net/natchiketa/w8kkc этот код для перетаскивания, но что это такое не работает - person Cathy; 20.06.2013
comment
выше прокомментируйте такой код jsfiddle, я хочу работать с рабочего стола на холсте, можете ли вы сослаться на некоторые учебные пособия, чтобы сделать это - person Cathy; 24.06.2013
comment
после перехода на холст изображение должно работать так же, как и другие изображения, встроенные в код. - person Cathy; 24.06.2013
comment
@markE звучит интересно (второй вариант), не могли бы вы собрать небольшую скрипку, в которой обрабатывается часть fabric.js? Это было бы чрезвычайно полезно - и здорово... - person Sandor Rozsa; 22.09.2017