Use images created from canvas

Question

I know I can save the image from canvas using the canvas.toDataURL(). But how can i immediately use it?

Here's the scenario:

I have a shopping cart with a customizable product. By changing attributes, I'm able to create a customized product image using canvas. Immediately after adding to cart, I want to use the generated canvas image as the cart thumbnail for the product added to cart.

How can I achieve this? Can someone help me with an idea for the programming workflow to achieve this? I am using Drupal + Ubercart with this.

Answer 1

1. Create a new image (either in script via new Image or as an element via document.createElement("img") and appending it to the DOM). If your cart already as an <img> element, then get a script reference to it instead.

2. (optional) Set the onload attribute of the image to a function, if you need to use it programmatically after it is ready.

3. Set the src of the image to your data URL.

For more information on the need to set onload before src, see
Should setting an image src to data URL be available immediately?