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

【问题标题】：How do I find the src value of an image uploaded using fileReader?如何找到使用 fileReader 上传的图像的 src 值？
【发布时间】：2019-11-09 20:11:41
【问题描述】：

我正在构建一个程序，允许用户选择要上传的图像。一旦用户选择了一个，它就会触发 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

}

【问题讨论】：

标签： javascript image filereader src createelement

【解决方案1】：

你是这样分配的：

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

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

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

【讨论】：