send canvas image data via html form, and load data into new blank canvas page

Question

I have an HTML button that captures the canvas image using toDataURL(). I want to pass the data to a form element, which will send via formmail. I can get all other variables passed via hidden form elements, but the canvas data won't take. It must not be formatted properly to send. What is the correct syntax to send, if possible?

In JavaScript

imgData = theCanvas.toDataURL(); document.getElementById('theImageData').value=imgData;

In HTML

<input type="hidden" name="theImageData" id="theImageData" value="">

Your code sample seems to be correct. You should use console.log(imgData) to see what data you put in imgData variable. — MartyIX
– MartyIX, Commented Nov 14, 2015 at 18:52
@Martin Vseticka document.getElementById('theImageData').value=imgData.value; seemed to work instead. I forgot to ask about the second part. I opened a blank JS with an empty variable and pasted the captured data into the variable's value. When I let it run with: context.putImageData(imgData, 0, 0); it didn't draw anything in the canvas. Any tips? — bobcodenewbie
– bobcodenewbie, Commented Nov 14, 2015 at 20:21
developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/… imgData.value should not work. That's very strange to me. To answer your second question: you should use this approach when you have data URL stackoverflow.com/a/3379955/99256 — MartyIX
– MartyIX, Commented Nov 14, 2015 at 20:47

MartyIX · Accepted Answer · 2015-11-14 20:53:34Z

0

When you use:

var imgData = theCanvas.toDataURL();

imgData should be then a string containing something like this data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNby...

this format is suitable for transfering in an HTML form (as opposed to some binary data).

To use imgData to put it back somewhere on the canvas, you can use this:

var img = new Image(); img.src = imgData; var ctx = theCanvas.getContext('2d'); img.onload = function() { ctx.drawImage(img, 0, 0); img.style.display = 'none'; };

answered Nov 14, 2015 at 20:53

MartyIX

28.8k33 gold badges143 silver badges218 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

bobcodenewbie Over a year ago

Worked great when I pasted generated data directly into a variable declaration and ran the JS, however when I SENT the canvas data via formmail and copied the canvas data from my email into a JS variable declaration, and ran the JS, it wouldn't work. I kept getting "unexpected token :" I had surrounded the var value with quotes and ended with a semicolon, which DID work the first time, something's getting lost when it goes through email?

MartyIX Over a year ago

In this specific case, it should be OK as you did it. Something must happen to data along the way.

bobcodenewbie Over a year ago

Yes, it formatted the email text with extra returns every 3 lines, but a little scanning and editing makes it work! Onward and upward.

Collectives™ on Stack Overflow

send canvas image data via html form, and load data into new blank canvas page

1 Answer 1

3 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Linked

Related