Html5 canvas 如何使用fabric.js将图像从用户系统复制并粘贴到画布

我们可以使用fabric.js将图像从用户系统（桌面/任何文件夹）复制（Ctrl+C）并粘贴（Ctrl+V）到画布上吗。我在画布中看到了复制粘贴程序，我在搜索谷歌时发现了这个程序，但没有找到任何桌面到画布的相关示例。下面是用于复制和粘贴的代码段

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();    
}

---

有可能吗？事实上，我听说这可能是不可能的。有人能告诉我怎么做吗？

如果你的目标是现代浏览器，你可以结合2个新的（但被广泛采用的）html5功能来完成你的任务：

您可以使用

dragover

和

drop

事件在页面上创建dropzone

然后，您可以使用FileReader API将图像文件读取到图像对象中

然后回到FabricJS，像往常一样加载图像

下面是一个教程，介绍如何完成硬位（#1，#2）：

[添加了有时允许剪切/粘贴图像文件的代码]

大多数现代浏览器都支持绑定“粘贴”事件

// 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
        }
    }
}

//侦听粘贴事件
window.addEventListener（“粘贴”，粘贴图像）；
函数粘贴图像（事件）{
//获取原始剪贴板数据
var cbData=event.clipboardData；
对于（var i=0；iThanks for ur reply@markE我已经检查过这个网站。我们可以使用从用户系统到画布的复制和过去的关键字吗？从上面的链接我尝试了拖放，但它没有正常工作。添加了剪切/粘贴代码，可能在Chrome中工作。但是出于安全原因，浏览器通常不允许剪切/粘贴。谢谢，因为我们需要请记住在拖放的同时进行复制和粘贴，但主要优先级为“仅复制/粘贴”。它仅显示粘贴代码是此enuf或应单独写入复制代码复制到剪贴板部分由操作系统处理（图像文件上的用户键盘[复制]，例如Windows中的Ctrl+C）。复制时不需要对您的部分进行编码。此代码将捕获复制到剪贴板的所有内容并尝试查找图像。同样，浏览器对此粘贴代码的支持是有限的和暂时的。顺便问一下，您对拖放链接有何问题？（除了IE argh IE外，它通常在现代浏览器中工作正常！）。