我正在构建一个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或图像。