使用javascript在Html页面中粘贴系统中的图像

Question

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

$("#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 undefined.我在谷歌尝试了很多链接,但无法达到目标.我也试过下面的stackoverflow 链接:使用JavaScript从剪贴板粘贴图像也是以下链接:

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

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

任何人都可以帮我完整的例子如何实现它？

Answer 1

演示

适用于最新的chrome/firefox.Chrome实施很简单.Firefox有限制,用户必须给命令做粘贴,如键盘事件和可编辑输入必须集中,所以我们在这里做技巧 - 在ctrl下我们focusthat输入字段,释放非焦点.

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中提取图像数据(即复制到剪贴板的屏幕截图).您可以获取复制的文件,但不能获取数据.

[来自停船流程帖子]

Answer 2

铬合金

将您的代码添加到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 for Chrome 的代码和我的 Firefox 代码的组合版本（通过 ctrl+print 通过系统屏幕转储创建的剪贴板内容进行测试，并从 gimp 复制图像部分）