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.

I don't think that worked. toBlob() seems pretty unsupported if this is still true http://stackoverflow.com/questions/6736023/which-browsers-and-versions-support-the-canvas-toblob-method — Dave Chenell, Nov 06 '12 at 18:34

score 2 · Accepted Answer · answered Nov 06 '12 at 18:52

2

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?

answered Nov 06 '12 at 18:52

JayC

7,053
2
25
41

Yes toDataUrl is happening after the canvas has been drawn to. The image that is being created is the exact same size as my canvas, its just completely blank/transparent. – Dave Chenell Nov 06 '12 at 19:07
I would expect it to be the same size as the canvas, regardless. You mention it's "happening" after the canvas is drawn to. But if you're creating new `Image` objects, setting their `onload` methods to draw the image, then setting the `src`, and then *immediately* calling `canvas.toDataUrl`, you're calling the method before the canvas has been drawn to, not after. – JayC Nov 06 '12 at 19:18
1

Wow, your the man, I was setting the images with onLoad. Everything in the console looked like it was happening in the correct order, but setting the images with onload was the problem. You rock. – Dave Chenell Nov 06 '12 at 19:36

score 0 · Answer 2 · answered Nov 06 '12 at 18:05

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);
}

Sorry I don't think this is relevant, I don't have any image uploading, all the images I use are already on localhost. — Dave Chenell, Nov 06 '12 at 18:37

Create image from canvas composition

2 Answers2