Storing the canvas as a image with .png extension but in a variable

Question

I have two Webpages, one in which a user draws on the canvas and can download it as an image, the second webpages the image can be uploaded to be further processed. is there a way to remove this downloading and again uploading and do the whole process in a single step?

The second page requires an image with an extension of PNG

I tried using canvas.toDataURL but its not working

Update i have added the functionality of the second webpage to the first can i directly save the canvas in the same format when an image is uploaded

this is the function to upload the file on the second webpage

function handleFileSelect(evt) {
  const file = evt.target.files[0];

  // do nothing if no file is selected
  if (file == null) {
    postData.data = '';
    postData.type = '';
    return;
  }

  // only allow images
  if (!file.type.match('image.*')) {
    alert('Unsupported Image File');
    resetForm();
    return;
  }

  const reader = new FileReader();
   reader.onload = (event) => {
   postData.data = event.target.result;
   postData.type = file.type;

   };

  // Read in the image file as binary string.
  reader.readAsBinaryString(file);
}

how can i convert the canvas in the result to "event.target.result"

possible duplicate of https://stackoverflow.com/questions/13198131/how-to-save-an-html5-canvas-as-an-image-on-a-server — yunzen, Mar 27 '19 at 11:39
possible duplicate of https://stackoverflow.com/questions/10673122/how-to-save-canvas-as-an-image-with-canvas-todataurl — yunzen, Mar 27 '19 at 11:39
What do you mean _its not working_? What did you try exactly? Did you get anything? Any error messages? You have to put in more effort into your question in order to us helping you. — yunzen, Mar 27 '19 at 11:40
Where do you want to save the file? Client side or server side? — yunzen, Mar 27 '19 at 11:55
i actually want to remove the downloading and uploading part and want to make it a single process, so i need help on how to remove the downloading and uploading part — Tarun Karthik, Mar 27 '19 at 11:57
So basically what you have now is: Download the Canvas as an image on the client and uploading to the server (two user initiated steps). What you want: Directly store the canvas image on the server without the user needing to download it and upload again (single step). Is this correct? — yunzen, Mar 27 '19 at 12:12

Storing the canvas as a image with .png extension but in a variable

0 Answers0