操作方法使用fabric.js将图像从用户系统复制并粘贴到Canvas [英] How to do Copy and paste the image from User system to Canvas using fabric.js

问题描述

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

Can we do copy(Ctrl+C) and paste(Ctrl+V) the image from User system(desktop/any folder) to canvas using fabric.js. I have seen the copy and paste program inside the canvas, I have found this Example while searching google but didnt find any relevant example for desktop to canvas. Here is the snippet for copy and paste

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

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

Is it possible to do actually I have heard dat it's may not possible.Can anyone guide me how to do please.

推荐答案

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

If you're targeting modern browsers you can combine 2 new (but widely adopted) html5 features to accomplish your task:

1. 你可以使用 dragover <在页面上创建一个dropzone / code>和 drop events。

然后你可以使用FileReader API来读取将图像文件转换为图像对象。

Then you can use the FileReader API to read the image files into an image object.

然后它返回到FabricJS以照常加载图像。

Then it's back to FabricJS to load the image as usual.

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

Here's a tutorial describing how to do the hard bits (#1,#2): http://www.html5rocks.com/en/tutorials/file/dndfiles/

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

最现代浏览器支持绑定粘贴事件。

Most modern browsers support binding the "paste" event.

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

但是...... !!

But...!!

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

Support for non-text mime types (ie "image") is scarce. Chrome seems to support it "off-and-on".

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

…And browsers are constantly revising their cut/paste capabilities because of security concerns.

这是代码有时适用于Chrome。

Here is code that sometimes works in 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的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！