Create image from canvas composition

Question

I have a canvas composition that is made up of 10 different images. These images get data from an xml file that has a list of coordinates which creates a mask for each of the images as they are put onto the canvas.

I then try to save the canvas as an image with

var image = new Image();
image.src = canvas.toDataURL("image/png");

However, the image turns up completelty blank, and there are no errors. Upon inspecting the image that appears, the src is:

   data:image/png;base64,iVBORw0KGgoAAAANS...ICxjqAABQ+0HCBAgQIBAWMQ4CcQAAAAAElFTkSuQmCC (shortened)

I read all about security issues, tainted canvas's etc when files are pulled from different domains but I don't get any errors and everything I use is hosted locally (http://localhost)

Any ideas on how to debug this?

EDIT: I'm more interested in just displaying this as an image in the browser, then worrying about saving it later. But if "saving" it to local storage then displaying it works, then i'm down with that.

Answer 1

Are you sure you are calling toDataUrl after the canvas has been drawn to? Are you sure that wherever you are attaching the new image to the DOM, it will be visible with appropriate width/height/opacity?

Answer 2

Do you have a function that handles the image upload?

https://developer.mozilla.org/en-US/docs/Using_files_from_web_applications#Example.3a.c2.a0Showing_thumbnails_of_user-selected_images

 function FileUpload(img, file) { var reader = new FileReader(); this.ctrl = createThrobber(img); var xhr = new XMLHttpRequest(); this.xhr = xhr; var self = this; this.xhr.upload.addEventListener("progress", function(e) { if (e.lengthComputable) { var percentage = Math.round((e.loaded * 100) / e.total); self.ctrl.update(percentage); } }, false); xhr.upload.addEventListener("load", function(e){ self.ctrl.update(100); var canvas = self.ctrl.ctx.canvas; canvas.parentNode.removeChild(canvas); }, false); xhr.open("POST", "http://demos.hacks.mozilla.org/paul/demos/resources/webservices/devnull.php"); xhr.overrideMimeType('text/plain; charset=x-user-defined-binary'); reader.onload = function(evt) { xhr.sendAsBinary(evt.target.result); }; reader.readAsBinaryString(file); }