0

I'm trying to make a save function for a photo editing app I am making and I am stumped on what to set the variable to. The line that is the issue is let imageData = image.toDataURL("image/jpg"); I have tried setting the variable to a few different things but none of them seem to work. Any thoughts?

// Get the source image to be edited
let image = document.getElementById('sourceImage');

function uploadImage(event) {
    var file = event.target.files[0];
    var reader = new FileReader();
  reader.onload = function(e) {
      image.src = reader.result;
  };
  reader.readAsDataURL(file)
}
// Save the edited image
function saveImage() {
  let linkElement = document.getElementById('link');
  linkElement.setAttribute('download', 'edited.jpg');
  let imageData = image.toDataURL("image/jpg");
  imageData.replace("image/jpg", "image/octet-stream");
  linkElement.setAttribute('href', imageData);
  linkElement.click();
}

Just as a note, I have an applyFilter() function but it didn't seem relevant to put in here, if needed I can add it

dunks
  • 1
  • 1
  • Instead of using an anchor then triggering a click, have you tried **window.location.href = imageData;**? – imvain2 Aug 05 '22 at 20:35
  • Looks like image.src is a data uri, so you might be able to extract the image data from that. Check https://stackoverflow.com/a/49927889/535480 – James Aug 05 '22 at 20:53

0 Answers0