javascript - FileReader 从浏览器窗口拖动图像

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 格式？

最终，有没有办法通过服务器端 curl 请求获取图像 URL，然后获取实际的 base64？

有什么想法吗？

Answer 1

您可以使用 e.dataTransfer.getData('url') 判断是否有可用的 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/