1

I am using html2canvas to convert HTML to an image.

html2canvas(document.querySelector('body')).then((canvas) => {
    let jpegUrl = canvas.toDataURL('image/jpeg');
    let pngUrl = canvas.toDataURL(); // PNG is the default
    let base64 = canvas.toDataURL('image/jpeg').split(';base64,')[1];
});

My goal is to "when a user submits a form, then capture the current page and convert it to canvas (image)" So that I can store that image in a MySQL database in blob format.
Currently, I am able to convert captured image in base64 string. But then I need to convert base64 string into blob (binary). So that I am able to store blob in MySQL.
How can I do that ?

Abhishek kamal
  • 319
  • 3
  • 12
  • Didn't you check for "creating blob from base64" ? See here: https://stackoverflow.com/questions/16245767/creating-a-blob-from-a-base64-string-in-javascript – E-telier Dec 24 '21 at 10:56
  • Yes, the link you shared is the conversion of `base64 to blob`. I am getting `blob` but then how can I store that generated blob object to my database. (I am using BLOB in MySQL to store images) – Abhishek kamal Dec 24 '21 at 11:04
  • Can you please see my another question https://stackoverflow.com/questions/70472403/how-to-store-blob-object-to-mysql-database?noredirect=1#comment124574222_70472403 – Abhishek kamal Dec 24 '21 at 11:58
  • My guess would be to use Blob.text() , see https://developer.mozilla.org/en-US/docs/Web/API/Blob/text – E-telier Dec 24 '21 at 12:11
  • Tried but didn't success – Abhishek kamal Dec 24 '21 at 13:12
  • What does that mean? Do you have an error message? How far did you go? – E-telier Dec 24 '21 at 16:17

0 Answers0