什么是 DataTransferItemList 以及 DataTransferItemList.add 在做什么?

2024-01-01

所以我试图理解paste https://stackoverflow.com/q/27262428/607407 and copy谷歌浏览器中的 API。我也不明白。

As of copy, you'll probably want to use javascript to add something in clipboard. I'm working with images (strings work well actually1):

//Get DataTransferItemList
var files = items.items;

if(files) {
  console.log(files);
  //Create blob from canvas
  var blob = Blob.fromDataURL(_this.editor.selection.getSelectedImage().toDataURL("image/png"));

  var file;
  try {
    //Try to create file from blob, which may fail
    file = new File([blob], "image.png", {type:"image/png"}); 
  }
  catch(e) {
    return false;
  }
  if(file) {
    //I think this should clear previous data from clipboard
    files.clear();
    //Add a file as image/png
    files.add(file, "image/png");
  }
  //console.log(files.add(file));
}

问题是,我真的不知道那是怎么回事add方法工作。我发现this "文档“对于数据传输项目列表 http://html5index.org/Drag%20and%20Drop%20-%20DataTransferItemList.html#add其中说:

    add(any data, optional DOMString type)

What's any data? (怎么会有人在文档中写这个?)某物已添加到剪贴板,我不知道它是什么。我无法将其粘贴到任何地方 - 除了 Chrome。如果我使用复制的文件检查粘贴事件,则该事件位于 DataTransferItemList 中:

它可以转换为文件,但如果我尝试将其转回<img>:

ImageEditorKeyboard.prototype.processFile = function(file) {
  //File reader converts files to something else
  var reader = new FileReader();
  //Refference to this class
  var _this = this;
  //happens when the file is loaded
  reader.onload = function(event) {
    var img = new Image;
    img.onload = function() {
      _this.processImage(this);
    };
    img.src = event.target.result;
  }; // data url!
  //Read file
  reader.readAsDataURL(file);
}

I get the error2:

如果我记录的值event.target.result结果发现数据为空:

console.error("String '", event.target.result, "' ain't a valid URL!");
  • Q:具体规格是什么DataTransferItemList,它的方法和属性,尤其是.add method?

1: To add string to clipboard (during copy event of course!), call this: event.clipboardData.setData(data, "text/plain");. The second argument doesn't seem to have any functionality - using image/png will not do anything.

2: Funny thing is that this error can't be caught http://jsfiddle.net/Darker/vom2rhgf/1/.


None

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

什么是 DataTransferItemList 以及 DataTransferItemList.add 在做什么? 的相关文章

随机推荐