Question

我有一个div，用户可以拖放图像然后，使用FileReader，我得到图像的base64。工作正常。

dropper.ondrop = function (e) {

    e.preventDefault();

    var file = e.dataTransfer.files[0];

    var reader = new FileReader();
    reader.readAsDataURL(file);
};

我的问题是，如果我打开浏览器窗口并从浏览器拖放图像，我会收到错误：

Failed to execute 'readAsDataURL' on 'FileReader': 
parameter 1 is not of type 'Blob'.

现在，是否有任何转变来从浏览器窗口拖动图像的base64？

最终，是否有办法获取图像URL，然后使用服务器端卷曲请求获取实际的base64？

有什么想法吗？

Answer 1

您可以使用e.dataTransfer.getData('url')来判断是否有可用的网址。像这样：

var url = e.dataTransfer.getData('url');
if(url){
    console.log('Url');
    console.log(url);
}else{
    console.log('File');
    var file = e.dataTransfer.files[0];
    var reader = new FileReader();
    reader.readAsDataURL(file);
}

然后，使用URL，您可以加载img元素并使用canvas上的绘制来获取base64表示。像这样：

var img = document.createElement('img');
img.crossOrigin = 'anonymous';
img.onload = function(){
    var canvas = document.createElement('canvas');
    canvas.width = this.width;
    canvas.height = this.height;
    var context = canvas.getContext('2d');
    context.drawImage(this, 0, 0);
    console.log(canvas.toDataURL());
};
img.src = url;

这将是“最终”产品：

var dropper = document.querySelector('div');
dropper.ondragover = function(e) {
    e.preventDefault();
}
dropper.ondrop = function (e) {
    e.preventDefault();
    var url = e.dataTransfer.getData('url');
    if(url){
        console.log('Url');
        console.log(url);
        var img = document.createElement('img');
        img.crossOrigin = 'anonymous';
        img.onload = function(){
            var canvas = document.createElement('canvas');
            canvas.width = this.width;
            canvas.height = this.height;
            var context = canvas.getContext('2d');
            context.drawImage(this, 0, 0);
            console.log(canvas.toDataURL());
        };
        img.src = url;
    }else{
        console.log('File');
        var file = e.dataTransfer.files[0];
        var reader = new FileReader();
        reader.readAsDataURL(file);
    }
};

div{
    border:1px solid red;
    height:240px;
    width:100%;
}

<div>Drop here</div>

也可在此处找到：https://jsfiddle.net/8u6Lprrb/1/

Answer 2

第一个参数是＆＃34; http：//＆＃34; 或＆＃34; https：//＆＃34; 协议而不是预期的＆＃34; file：//＆＃34; 协议。这就是为什么你不能用 HTML5 FILE API 阅读它，所以你可能想在尝试阅读内容之前先下载并保存文件。另一方面，您可以使用检索到的url更新img标记的src属性，并跳过readDataAsUrl（）部分以热链接图像。

FileReader从浏览器窗口拖动图像

2 个答案: