[英]How do I find the src value of an image uploaded using fileReader?
I'm building a program that allows the user to choose an image to upload. 我正在构建一个程序,允许用户选择要上传的图像。 Once the user chooses one, it triggers the previewFile() function, which uses FileReader to display the image. 一旦用户选择一个,它就会触发PreviewFile()函数,该函数使用FileReader来显示图像。
Now I'm building a function that will download the same image that the user uploaded (and add some style changes). 现在,我正在构建一个函数,该函数将下载用户上传的图像(并添加一些样式更改)。 First, I created a new image element, but now I'm stuck, since I can't figure out how to reference the src
value of the original image. 首先,我创建了一个新的图像元素,但由于无法弄清楚如何引用原始图像的src
值,因此现在陷入了困境。 Once I do get the src
value, I can finish adding the styles, then download the edited image. 一旦获得src
值,就可以完成添加样式,然后下载已编辑的图像。
Here's what I have so far - can anyone help me out? 这是我到目前为止的内容-有人可以帮我吗?
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);
}
}
And the function I need help with: 我需要帮助的功能:
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
}
You assigned it this way: 您以这种方式分配它:
const preview = document.querySelector('img'); preview.src = reader.result;
So you do the same thing to read it back: 所以您做同样的事情来读回它:
const preview = document.querySelector('img');
const something = preview.src;
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.