0

我们可以使用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();    
}

是否有可能实际上我听说这可能是不可能的。任何人都可以指导我如何做。

4

1 回答 1

2

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

  1. 您可以使用dragover和drop事件在页面上创建放置区。

  2. 然后您可以使用 FileReader API 将图像文件读入图像对象。

  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
        }
    }
}
于 2013-06-19T19:35:33.900 回答