1

我无法将图像从动态表中的一个 iframe (1) 拖动到可放置区域内的另一个 iframe (2)。我认为没有权限问题，而是“类型”问题。iframe (2) 上的放置区域正在处理来自除 iframe (1) 之外的任何地方的文件。iframe (1) 由 localhost 托管。iframe (2) 由不同的域托管。测试了我发现将数据 uri 转换为文件或 blob 的三个不同函数。setData 参数也已经过各种可能性的测试，目前还没有成功。有趣的是，在 Chrome 和 firefox 上用两个 iframe 打开网站后，我可以将一个 drop 从 firefox 拖放到 Chrome，但图像将被转换为 bmp 类型并重命名！另一种方法是行不通的。

  • setData / get Data 将图像数据 uri 拖放到拖放区域的正确参数是什么？
  • 我是否必须将数据 uri 转换为文件。斑点对象？
  • 如果是这样，再次，什么论据可以完成这项工作？

任何帮助将不胜感激！

var dataUri;
    var file;


    function mouseDown(event){


     toDataURL(event.target.src, function(dataUrl) {
             console.log('RESULT:', dataUrl.replace('data:text/plain;base64,', ''));

             dataUri = dataUrl.replace('data:text/plain;base64,', '');


          file =   urltoFile(dataUrl, 'hello.jpg','image/jpeg')
    .then(function(file){ console.log(file);});
        })
                       }



function drag(event) {
    // event.stopPropagation();  
     console.log(file);
      console.log(dataUri); 

event.dataTransfer.setData("text/plain", file);
 //event.dataTransfer.mozSetDataAt("application/x-moz-file", file, 0);   
 event.dataTransfer.effectAllowed = "move";      

} 

function drop(event) {
  //event.preventDefault();
        console.log(file);
      console.log(dataUri); 
     var data = event.dataTransfer.getData("text/plain");    
  //var data = event.dataTransfer.mozGetDataAt("application/x-moz-file", 0);
  event.target.appendChild(document.getElementById(data));
        document.getElementsById(data);
    console.log(data);
}

function allowDrop(event) {
  event.preventDefault();
}


function dataURLtoFile(dataurl, filename) {
    var arr = dataurl.split(','), mime = arr[0].match(/:(.*?);/)[1],
    bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);
    while(n--){
        u8arr[n] = bstr.charCodeAt(n);
    }
    return new File([u8arr], filename, {type:mime});
} 

function urltoFile(url, filename, mimeType){
        return (fetch(url)
            .then(function(res){return res.arrayBuffer();})
            .then(function(buf){return new File([buf], filename,{type:mimeType});})
        );
    }

function dataURItoBlob(dataURI) {
    // convert base64 to raw binary data held in a string
    // doesn't handle URLEncoded DataURIs - see SO answer #6850276 for code that does this
    var byteString = atob(dataURI.split(',')[1]);
    // separate out the mime component
    var mimeString = dataURI.split(',')[0].split(':')[1].split(';')[0];
    // write the bytes of the string to an ArrayBuffer
    var ab = new ArrayBuffer(byteString.length);
    var dw = new DataView(ab);
    for(var i = 0; i < byteString.length; i++) {
        dw.setUint8(i, byteString.charCodeAt(i));
    }
    // write the ArrayBuffer to a blob, and you're done
    return new Blob([ab], {type: mimeString});
}
4

0 回答 0