3

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.

Phrogz
  • 296,393
  • 112
  • 651
  • 745
Marvzz
  • 1,535
  • 3
  • 15
  • 22

1 Answers1

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?

Community
  • 1
  • 1
Phrogz
  • 296,393
  • 112
  • 651
  • 745
  • @Marvzz Has this answer not helped you? Do you have additional questions on this issue? – Phrogz Feb 24 '11 at 16:41
  • your answer made sense, sorry i just got back to the module just now. Ok, since we require that the generated image must be saved, I may need to store the data url on the database and retrieve later in a manner as u suggested. Thanks, I'll get back here if i got stuck. – Marvzz Mar 03 '11 at 02:02