CODEWITHSUNDEEP
formshtmlcanvasdrag-and-drop
JIbanez
JIbanez

Reputation: 21

canvas as part of html5 form

I'm still in the preliminary "figuring out" stage of this project, so I apologize if this is basic. I'm creating an html5 t-shirt designing app for a website, with basic drag and drop input onto a shirt graphic field, resizing and moving within the shirt field, and eventually submitting this along with some text input fields. The customer would then pay for their shirt they've designed and submit the order. I'm relatively new to html5, and have so far figured out that I would use canvas and the drag and drop functions. My question is that since I really need this to go along with text fields for the customer to input some info, and some checkbox fields etc, and submit it as part of a whole order, can a canvas be included in a form, as part of a form? Again, sorry if this is basic, I'm figuring it out as I go. Thanks for your input. Any leads on helpful tutorials etc would be awesome. I've been looking for a while but haven't found really what I'm looking for.

Upvotes: 1

Views: 3201

Answers (1)

Endre Simo
Endre Simo

Reputation: 11541

Unfortunately it's not possible to use <canvas> as input form, but what you can do is to draw into canvas, then after finishing the drawing operations "export" it's content into an <image>. Fortunately you can use image as a form.

The standard way to draw canvas content into an image is by using canvas.toDataURL("image/png"); method.

Translated into code, this would be something like the below snippet:

var canvasURL = canvas.toDataURL("image/png");
var img = document.getElementById("image").src = canvasURL;

and in HTML you will define the <input> form with the ID image

<form>
     <input type="image" id="image" onsubmit="submit();">
</form>

However there is one security concern which needs to be addressed: any images drawn onto the canvas must be hosted on the same web server with the same domain as the code executing it. If this condition is not met, a SECURITY_ERR exception is thrown.

If you need a more powerful library for image and canvas manipulation I can recommend this library which facilitates the work with canvas and image: http://www.nihilogic.dk/labs/canvas2image/

Upvotes: 3

Related Questions