Best way to save an image in an HTML form? Or: Is there an onChange event?

[flange-ipb]

Hello, first of all thanks for creating such an advanced image editor!

I'd like to integrate miniPaint into an HTML form and write its data into a hidden input field. The open-edit-save example shows nicely how data can be written. My question: When to do this?

• Does miniPaint offer an onChange event that listeners can register to? How would the performance be if I call miniPaint.FileSave.export_as_json() in such a callback? (That's usually my favorite strategy because of the web application framework I use.)
• Hook some JS snippet to the submit button's onclick or to the form's onsubmit that copies the data before form submission. (I guess export_as_json() is synchronous.)

Any suggestions/ideas?

Best regards, Frank

[viliusle]

Hello,

1. Trying to export JSON on each update (on_update/render is executed from 25/30 times per second to 0, depends on user actions) would end with extra lag for user. If using big images, lag would be huge. I would suggest try to avoid it.
2. Using extra button to save state sounds best way to do it.

[viliusle]

3. (even better) If you are using form, you can even save state just before form submit.

[flange-ipb]

Ok, thanks! Solution 2. or 3. work nicely. First, I tried to put the exported JSON data into an <input type="hidden">, which seems to have the same content size limitations like <input type="text"> - thus, large images cannot be sent. I managed to send the data embedded in a Blob object via a <input type="file"> now.