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