如何找到使用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;