如何使用纯 JavaScript 读取图像文件？

Posted 2023-02-24

【中文标题】如何使用纯 JavaScript 读取图像文件？

【英文标题】：How to read image file using plain javascript?

【发布时间】：2017-07-18 19:57:45

【问题描述】：

我是 javascript 新手，目前我的一个项目遇到问题，其中包括查看网站根文件夹中的图像。这是我当前的代码：

var reader = new FileReader();

    reader.onload = function(event)
           var dataUri = event.target.result,
               img = document.createElement("img");

               img.src =  dataUri;
               document.body.appendChild(img);
    ;

    reader.onerror = function(event)
           console.log("File could not be read: " + event.target.error.code);
    ;

reader.readAsDataURL("/uploads/extras/item_a/image1.png");

这是我的代码，它没有显示任何内容。在我的控制台中，它给了我一个错误或Uncaught TypeError: Failed to execute 'readAsDataURL' on 'FileReader': parameter 1 is not of type 'Blob'.

【问题讨论】：

控制台中显示了什么？

GET data: net::ERR_INVALID_URL@NewToJS

试试/uploads/extras/item_a/image1.png ?你的文件夹结构是什么样的？

控制台错误是说reader 对url 不满意。尝试对文件的整个路径（即http://example.com/uploads/extras/item_a/image1.png）进行硬编码以排除其他问题。

我得到了Failed to load resource: net::ERR_INVALID_URL@0019

【参考方案1】：

您似乎正在尝试加载用于 Javascript 的图像，而不是将其放入您的 html 中。您可以通过在 Javascript 中创建图像元素并设置它的源来做到这一点。除非您将其插入某处，否则它不会显示在您的网站上。

var image = document.createElement("img");
image.src = "file_path.png";

如果您希望访问的文件不在您网站的文件夹中，而是在通过文件路径运行网站机器的任何人上，出于安全原因，Javascript 会阻止您执行此操作。 （想象一下允许网站在您不知情的情况下访问您计算机上的任何文件！）您必须使用<input type="file"> 标签。

【参考方案2】：

这是我编写的用于以 HTML 和 Javascript 显示来自文件系统的图像的代码。

var inputSelectionHandler = function(event) 

            var reader = new FileReader();
            reader.readAsDataURL(event.srcElement.files[0]);
            reader.onload = function() 
                var fileContent = reader.result;
                var div = document.createElement("div");
                div.style.backgroundImage = "url(" + fileContent + ")";
                var btn_trigger = document.getElementById("btn_trigger");
                var file_btn = btn_trigger.parentElement;
                file_btn.insertBefore(div, btn_trigger);
            

【参考方案3】：

这是正确的做法

  var openFile = function(file) 
    var input = file.target;

    var reader = new FileReader();
    reader.onload = function()
      var dataURL = reader.result;
      var output = document.getElementById('output');
      output.src = dataURL;
    ;
    reader.readAsDataURL(input.files[0]);
  ;

<input type='file' accept='image/*' onchange='openFile(event)'><br>
<img id='output' style="height:100px; width:100px;">

做一些调查以了解代码中的错误在哪里，这最好学习

当您放弃时，请在此处发表评论，我很乐意再次提供帮助！ :)

【讨论】：

谢谢！但是，我不想使用<input> 标签。我想手动阅读。

不正确的方法是output.src = URL.createObjectURL(input.files[0]);。但是 OP 正在尝试从 url 加载文件，而不是从文件输入。

@TrishSiquian 你根本不能那样做，浏览器的安全性会阻止你。

@Kaiido 她正在尝试从本地文件加载，这是不可能的，如果她从 url（http/s 或任何不是 file:///）加载，她宁愿使用 img 标签什么如果她不这样做是为了！

@OmarElDon，我同意目前尚不清楚 OP 试图做什么，但我的观点是，您显示输入文件的方式不是 正确 的.你会同意你的答案无论如何都不能回答这个问题。而且 OP 从来没有谈论过本地文件（来自 file:// 协议），所以 XHR 可以工作，img.src = url 也可以工作。