Question

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

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

是否有可能实际上我听说过数据可能无法实现。任何人都可以指导我如何做。

Answer 1

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

您可以使用dragover和drop事件在网页上创建放置区。
然后您可以使用FileReader API将图像文件读入图像对象。
然后它回到FabricJS照常加载图像。

这是一个描述如何处理硬比特的教程（＃1，＃2）：http://www.html5rocks.com/en/tutorials/file/dndfiles/

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

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

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

但是...！

支持非文本mime类型（即“图像”）很少。 Chrome似乎支持“off-and-on”。

...由于安全问题，浏览器不断修改其剪切/粘贴功能。

以下代码有时适用于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
        }
    }
}

操作方法使用fabric.js将图像从用户系统复制并粘贴到Canvas

1 个答案: