Question

在将图像从一个iframe（1）拖出动态表到另一个可放置区域内的iframe（2）时遇到问题。我认为这不是权限问题，而是“类型”问题。 iframe（2）上的放置区域可用于处理除iframe（1）以外的任何位置的文件。 iframe（1）由本地主机托管。 iframe（2）由其他域托管。我发现了将数据uri转换为文件或blob的三种不同功能。 setData参数也已通过所有可能性进行了测试，但到目前为止还没有成功。有趣的是，在Chrome和firefox上使用两个iframe打开了网站后，我可以将一个从firefox拖放到Chrome，但是图像将转换为bmp类型并重命名！解决它的另一种方法不起作用。

setData / get Data删除图像的正确参数是什么放置区域上的数据uri？
我是否必须将数据uri转换为文件分别Blob对象？
如果是的话，又有什么论据可以做到呢？

任何帮助将不胜感激！

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});
}

将图像从表格单元格拖动到iFrame可放置区域

0 个答案: