如何找到使用 fileReader 上传的图像的 src 值？

Question

我正在构建一个允许用户选择要上传的图像的程序。一旦用户选择了一个，它就会触发 previewFile() 函数，该函数使用 FileReader 来显示图像。

现在我正在构建一个函数，它将下载用户上传的相同图像（并添加一些样式更改）。首先，我创建了一个新的图像元素，但现在我卡住了，因为我不知道如何引用原始图像的 src 值。一旦获得 src 值，我就可以完成添加样式，然后下载编辑后的图像。

这是我目前的情况 - 谁能帮助我？

HTML:

<input type="file" onchange="previewFile()">
<img src="" alt="Preview File...">

JavaScript:

function previewFile() {
      const preview = document.querySelector('img');
      const file = document.querySelector('input[type=file]').files[0];
      const reader = new FileReader();

      reader.addEventListener("load", function () {
        preview.src = reader.result;
      }, false);

      if (file) {
        reader.readAsDataURL(file);
      }
    }

我需要帮助的函数：


function createAndDownload() {
      const editedImage = document.createElement('img');

      /*
      Here's where I need help: I need to figure out how to get the image src 
      from the original image, and set it equal to editedImage.src
      */


//add styles
//download editedImage

}

Answer 1

您是这样分配的：

const preview = document.querySelector('img');
preview.src = reader.result;

所以你做同样的事情来读回来：

const preview = document.querySelector('img');
const something = preview.src;

如何找到使用 fileReader 上传的图像的 src 值？

How do I find the src value of an image uploaded using fileReader?

javascript

image

src

filereader

createelement