30

嗨，我正在创建一个网络聊天应用程序，我希望用户可以从桌面复制粘贴图像，或者可以直接粘贴屏幕截图，但我无法实现。我使用了以下代码：

$("#dummy").on("paste",function(event){

var items = (event.clipboardData ||   event.originalEvent.clipboardData).items;
console.log(JSON.stringify(items)); // will give you the mime types
for (index in items) {
    var item = items[index];
    if (item.kind === 'file') {
        var blob = item.getAsFile();
        var reader = new FileReader();
        reader.onload = function(event){
            console.log(event.target.result)}; // data url!
        reader.readAsDataURL(blob);
    }
}

})

在 Chrome 和 Firefox 中使用上面的代码，如果是图像，我会得到未定义的Clipboarddata 。 我在谷歌上尝试了很多链接，但无法达到目标。我还尝试了以下来自stackoverflow 的链接：使用JavaScript粘贴剪贴板中的图像 以及以下链接：

http://strd6.com/2011/09/html5-javascript-pasting-image-data-in-chrome/

http://codepen.io/netsi1964/pen/IoJbg

任何人都可以通过完整的示例帮助我如何实现它吗？

4

2 回答 2

24

演示

适用于最新的 chrome/firefox。Chrome 实现很简单。Firefox 有限制，用户必须给出命令才能像键盘事件一样进行粘贴，并且可编辑的输入必须被聚焦，所以我们在这里做一些技巧 - 在 ctrl 下我们聚焦输入字段，在释放 unfocus 时。

HTML：

<canvas style="border:1px solid grey;" id="my_canvas" width="300" height="300"></canvas>

JS：

var CLIPBOARD = new CLIPBOARD_CLASS("my_canvas", true);

/**
 * image pasting into canvas
 * 
 * @param string canvas_id canvas id
 * @param boolean autoresize if canvas will be resized
 */
function CLIPBOARD_CLASS(canvas_id, autoresize) {
    var _self = this;
    var canvas = document.getElementById(canvas_id);
    var ctx = document.getElementById(canvas_id).getContext("2d");
    var ctrl_pressed = false;
    var reading_dom = false;
    var text_top = 15;
    var pasteCatcher;
    var paste_mode;

    //handlers
    document.addEventListener('keydown', function (e) {
        _self.on_keyboard_action(e);
    }, false); //firefox fix
    document.addEventListener('keyup', function (e) {
        _self.on_keyboardup_action(e);
    }, false); //firefox fix
    document.addEventListener('paste', function (e) {
        _self.paste_auto(e);
    }, false); //official paste handler

    //constructor - prepare
    this.init = function () {
        //if using auto
        if (window.Clipboard)
            return true;

        pasteCatcher = document.createElement("div");
        pasteCatcher.setAttribute("id", "paste_ff");
        pasteCatcher.setAttribute("contenteditable", "");
        pasteCatcher.style.cssText = 'opacity:0;position:fixed;top:0px;left:0px;';
        pasteCatcher.style.marginLeft = "-20px";
        pasteCatcher.style.width = "10px";
        document.body.appendChild(pasteCatcher);
        document.getElementById('paste_ff').addEventListener('DOMSubtreeModified', function () {
            if (paste_mode == 'auto' || ctrl_pressed == false)
                return true;
            //if paste handle failed - capture pasted object manually
            if (pasteCatcher.children.length == 1) {
                if (pasteCatcher.firstElementChild.src != undefined) {
                    //image
                    _self.paste_createImage(pasteCatcher.firstElementChild.src);
                }
            }
            //register cleanup after some time.
            setTimeout(function () {
                pasteCatcher.innerHTML = '';
            }, 20);
        }, false);
    }();
    //default paste action
    this.paste_auto = function (e) {
        paste_mode = '';
        pasteCatcher.innerHTML = '';
        var plain_text_used = false;
        if (e.clipboardData) {
            var items = e.clipboardData.items;
            if (items) {
                paste_mode = 'auto';
                //access data directly
                for (var i = 0; i < items.length; i++) {
                    if (items[i].type.indexOf("image") !== -1) {
                        //image
                        var blob = items[i].getAsFile();
                        var URLObj = window.URL || window.webkitURL;
                        var source = URLObj.createObjectURL(blob);
                        this.paste_createImage(source);
                    }
                }
                e.preventDefault();
            }
            else {
                //wait for DOMSubtreeModified event
                //https://bugzilla.mozilla.org/show_bug.cgi?id=891247
            }
        }
    };
    //on keyboard press - 
    this.on_keyboard_action = function (event) {
        k = event.keyCode;
        //ctrl
        if (k == 17 || event.metaKey || event.ctrlKey) {
            if (ctrl_pressed == false)
                ctrl_pressed = true;
        }
        //c
        if (k == 86) {
            if (document.activeElement != undefined && document.activeElement.type == 'text') {
                //let user paste into some input
                return false;
            }

            if (ctrl_pressed == true && !window.Clipboard)
                pasteCatcher.focus();
        }
    };
    //on kaybord release
    this.on_keyboardup_action = function (event) {
        k = event.keyCode;
        //ctrl
        if (k == 17 || event.metaKey || event.ctrlKey || event.key == 'Meta')
            ctrl_pressed = false;
    };
    //draw image
    this.paste_createImage = function (source) {
        var pastedImage = new Image();
        pastedImage.onload = function () {
            if(autoresize == true){
                //resize canvas
                canvas.width = pastedImage.width;
                canvas.height = pastedImage.height;
            }
            else{
                //clear canvas
                ctx.clearRect(0, 0, canvas.width, canvas.height);
            }
            ctx.drawImage(pastedImage, 0, 0);
        };
        pastedImage.src = source;
    };
}

Safari 没有实现 DataTransfer.items，因此无法在 Javascript 中提取图像数据（即复制到剪贴板的屏幕截图）。您可以获取复制的文件，但不能获取数据。

[来自stakeoverflow帖子]

于 2016-02-23T11:31:39.433 回答
-3

铬合金

将您的代码添加到codepen中的代码并为 div 提供一个 id（第 50 行）

将上面发布的脚本包含在 div id 中

$("#one").on("paste", function (event) {

  var items = (event.clipboardData || event.originalEvent.clipboardData).items;
  console.log(JSON.stringify(items)); // will give you the mime types
  for (index in items) {
    var item = items[index];
    if (item.kind === 'file') {
      var blob = item.getAsFile();
      var reader = new FileReader();
      reader.onload = function (event) {
        console.log(event.target.result)
      }; // data url!
      reader.readAsDataURL(blob);
    }
  }

})

制作截图，选择第一个 div（带有 id 的那个one），按 ctrl+v，屏幕截图出现在 div 中，并且图像数据记录到控制台。

Firefox 在这个小提琴中使用我为你准备的代码

小提琴

<html>
<head>
  <meta charset="utf-8">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
  <style>
    #one {
      border: 1px solid black;
      min-height: 100px;
      min-width: 100px;
    }
  </style>
</head>

<body>
  Copy image from clipboard in Firefox.
  <br /> Select the box below and paste a image from clipboard via ctrl+v
  <br /> Data printed at console
  <br />
  <div id="one" contenteditable="true"></div>

  <script>
    $(function () {
      $("#one").bind("input paste", function (ev) {
        window.setTimeout(function (ev) {
          var input = $("#one").children()[0].src;
          var s = input.split(',');
          var mime = s[0];
          var data = s[1];
          console.log(mime);
          console.log(data);
        }, 300);
      });
    });
  </script>
</body>

</html>

Chrome 和 Firefox 结合

可以在这个更新的小提琴中找到一个组合版本，使用来自 @pareshm 的 Chrome 代码和我的 Firefox 代码（使用 ctrl+print 通过系统屏幕转储创建的剪贴板内容进行测试，并从 gimp 复制图像部分）

于 2016-02-19T09:29:36.137 回答