无法在Illustrator对象的拖放上执行datatransfer.getData()

时间:2018-11-16 04:49:44

标签: angular google-chrome drag-and-drop adobe-illustrator typescript3.0

我正在构建一个Web工具,允许用户从不同来源拖放图像。我可以从文件系统和浏览器中拖放对象,但不能使用illustrator中的对象来做到这一点。

    @HostListener('drop', ['$event']) public onDrop(event) {
      event.preventDefault();
      event.stopPropagation();
      event.dragstart = true;
      let dataTransfer = event.dataTransfer;
      let types: string = dataTransfer.types;
      console.log(types);
      let transfer: any;
      if (types.indexOf("Files")>-1)
        this.handleFiles(dataTransfer.files);
      else{
        console.log("elsewhere")
        transfer = dataTransfer.getData(types);
      }
    }

    handleFiles(files) {

      for (var i = 0; i < files.length; i++) {
        var file = files[i];
        var imageType = /image.*/;
        if (!file.type.match(imageType)) { continue; }
        var img = <HTMLElement>document.getElementById("imagePlaceholder");
        // img.file = file;
        var reader = new FileReader();
        reader.onload = function (event: any) {
          img.setAttribute('src', event.target.result);
        };
        reader.readAsDataURL(file);
      }
    }

html:

<div class="dropzone" imageDnD (drop)=handleDrop($event)></div>

事件中的文件类型为 com.adobe.cep.dnd.pasteboardtype 。当我读取fileType时,我得到以下信息。

"{"assetList":[{"data":[""],"type":"image"},{"data":[""],"type":"text"}],"source":"com.adobe.illustrator","version":"23.0"}"

我们应该收到一些SVG或图像。

0 个答案:

没有答案