I am currently working on a program that empowers the user to select an image for uploading. Once the user chooses an image, it activates the previewFile() function, which makes use of FileReader to display the selected image.
Now, I'm in the process of developing a function that will allow the user to download the same uploaded image with additional style modifications. Initially, I created a new image element, but I have hit a roadblock as I am unable to find a way to reference the src value of the original image. As soon as I can retrieve the src value, I can proceed to apply the necessary styles and ultimately download the edited image.
This is what I have accomplished so far - could anyone lend me a hand?
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 here is the portion where I seek assistance:
function createAndDownload() {
const editedImage = document.createElement('img');
/*
At this point, I require guidance: I need to determine how to obtain the image src
from the original image and assign it to editedImage.src
*/
//add styles
//download editedImage
}