如何仅使用 vanilla javascript 从 url 读取图像文件？答案

【问题标题】：How to read image files from url using only vanilla javascript?如何仅使用 vanilla javascript 从 url 读取图像文件？
【发布时间】：2020-01-09 21:19:24
【问题描述】：

有没有办法只使用 vanilla javascript 从 url 读取图像文件？作为上下文，我正在构建一个简单的拖放图像上传器，我想我已经获得了您从 PC 读取 literal 文件的部分，但至于 URL，我该怎么做呢？示例：https://imgur.com/upload

我希望能够从 google 中拖出一张图片并将其读取到 dropzone 中。

https://codepen.io/Ryenra/pen/JjoyPaq

function dropEv(e) {
    e.preventDefault();
    e.stopPropagation();
}

function dragOver(e) {
    document.getElementById('box').style = "opacity: 0.9;";
}

function dragLeave(e) {
    document.getElementById('box').style.removeProperty('opacity');
}


function receiveFile(e) {    
    let temp = e.dataTransfer.files;
    if(temp.length && temp[0].type.match(/image.*/)){
        document.getElementById('eText').textContent = temp[0].name;
    }else{
        alert('nv');
    }
}

html,body{
    height: 100%    
}

#content {
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}


#box{
    width: 350px;
    height: 300px;   
    background: repeating-linear-gradient(
  -55deg,
  #222,
  #222 10px,
  #333 10px,
  #333 20px
);
    display: flex;
    justify-content: center;
    align-items: center;
}

#opa{
    width: 100%;
    height: 100%;
    border: 2px solid #000;
    display: flex;
    justify-content: center;
    align-items: center;
}



#inputFile{
    display: none;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="style.css">
    <script src="script.js"></script>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <div id="content">           
            <div id="box" ondrop="dropEv(event),dragLeave(event),receiveFile(event)"  ondragover="dragOver(event),dropEv(event)" ondragleave="dragLeave(event)">
                <div id= "opa">
                        <p id="eText">Choose an image or drag it here!</p>
                </div>   
            </div>                  
    </div>
</body>
</html>

【问题讨论】：

标签： javascript html

【解决方案1】：

您可以像 Nigel 提到的那样使用 Fetch API。

fetch('the image url', {mode: 'cors'})
  .then(res => res.blob())
  .then(blob => { /* use the blob */ })

fetch 将返回一个响应，您需要使用res.blob() 将其读取为Blob

注意：fetch 和 res.blob 都返回一个 promise，需要使用示例中的 .then() 或 async/await 来解决。

Blob 和File 基本相同，因此您可以根据需要使用Blob，但如果您确实需要，可以使用File() constructor 将其转换为File像这样：

let file = new File([blob], "file name", {type: blob.type})

但是，由于存在 CORS，因此您在尝试从任意站点获取图像时可能会遇到问题。然后您可能必须创建一个代理服务器来获取图像并将“Access-Control-Allow-Origin”标头添加到图像中，其值为“*”（任何域）或“您的站点所在的域”开”。

抱歉插件，但我最近写了一篇关于在客户端处理文件的指南，它可能对您的项目有用：Using Files in Client-Side JavaScript

【讨论】：

【解决方案2】：

一般来说，你不能。 Same-origin policy 阻止浏览器读取来自不同来源的数据（除非使用 CORS 授予权限）。

您以https://imgur.com/upload 为例，但他们不使用客户端 JavaScript 读取图像。 URL 本身被发送到服务器，然后由 服务器端 代码从那里请求。

【讨论】：