canvas toDataURL not returning a complete image

Question

I'm building a jQuery plugin which watermarks images (and yes, i'm well aware of the multitudinal drawbacks of a javascript/html5 watermarking system but just ignore that for now.) The basic method for each image is:

• paste the image to the background of a canvas
• add the data for a watermark image over that,
• replace the src of the original image with that of the canvas (which now contains the watermark.)

Now it appears to work fine if I replace the image element with the canvas itself.. all of the elements appear on the canvas. But when I get the dataURL of the canvas, everything but the last image drawn onto it appears. I wouldn't even mind except this plugin also needs to replace the links to images as well, and so replace the hrefs with data urls (with the watermark.)

This is the current code:

(function($){

    $.fn.extend({

        cmark: function(options) {

            var defaults = {
                type: 'image',
                content: 'watermark.png',
                filter: 'darker',
                scale:300,
                box: {
                    top         :   0.5,
                    left        :   0.5,
                    width       :   0.75,
                    height      :   0.75,
                    bgcolor     :   '#000000',
                    bgopacity   :   0.5,
                    fgopacity   :   1
                },

                callback_unsupported: function(obj){
                    return obj;
                }

            }

            var getScale = function(w, h, scale){
                ratio = Math.min(scale/w, scale/h);
                scalew = Math.round(ratio*w);
                scaleh = Math.round(ratio*h);
                return [scalew,scaleh];
            }



            var options =  $.extend(defaults, options);

            return this.each(function() {

                obj = $(this);

                canvas = document.createElement('canvas');

                if(!window.HTMLCanvasElement){
                    return options.callback_unsupported(obj);
                }


                /*  if selecting for images, reset the images. Otherwise, 
                    we're replacing link hrefs with data urls. */

                if(obj.attr('src')){
                    target_img = obj.attr('src');
                }

                else if (obj.attr('href')){
                    target_img = obj.attr('href');
                }

                // get the filetype, make sure it's an image. If it is, get a mimetype. If not, return.

                ftype = target_img.substring(target_img.lastIndexOf(".")+1).toLowerCase();

                canvasbg = new Image();

                canvasbg.onload = function(){
                    iw = canvasbg.width;
                    ih = canvasbg.height;

                    scale = getScale(iw, ih, options.scale);

                    iw = scale[0];
                    ih = scale[1];

                    canvas.setAttribute('width', iw);
                    canvas.setAttribute('height', ih);

                    ctx = canvas.getContext('2d');

                    /* define the box as a set of dimensions relative to the size of the image (percentages) */

                    bw = Math.round(iw * options.box.width);
                    bh = Math.round(ih * options.box.height);

                    // for now the box will only ever be centered.
                    bx = Math.round((iw * options.box.top) - (bw/2));
                    by = Math.round(ih * options.box.left - (bh/2));

                    /* draw the box unless the opacity is 0 */
                    if(options.box.bgopacity > 0){
                        ctx.fillStyle = options.box.bgcolor;
                        ctx.globalAlpha = options.box.bgopacity;
                        ctx.fillRect(bx, by, bw, bh);
                    }

                    wm = new Image();

                    wm.onload = function(){
                        ww = wm.width;
                        wh = wm.height;

                        scalar = Math.max(bw, bh); // scale to within the box dimensions
                        scale = getScale(ww, wh, scalar);
                        ww = scale[0];
                        wh = scale[1];

                        ctx.globalCompositeOperation = options.filter;
                        ctx.drawImage(wm, bx, by, ww, wh);
                    }

                    wm.src = options.content;

                    ctx.drawImage(canvasbg, 0, 0, iw, ih);

                    obj.replaceWith(canvas);

                    $('body').append('<img src="'+canvas.toDataURL()+'">');

                    //obj.attr('src', canvas.toDataURL());
                }

                canvasbg.src = target_img;



            });
        }
    })
})(jQuery);

I added a line which dumps an image with the data url directly onto the page for testing and this is what I see... on the left is the canvas element, on the right is the image with the data url:

So yeah, this has had me stumped for a couple of days now. I'm probably missing something horribly obvious but I can't see it.

... edited because the example is no longer online. sorry.

Answer 1

First of all, don't build a string buffer that big for a tag.

var img = new Image();
img.src = canvas.toDataURL();
$('body').append(img);

Or if you prefer:

$('body').append($('<img>').attr('src', canvas.toDataURL()))

Second, you are getting there dataURL of the canvas before you draw the watermark. The drawing happens in the wm.onload callback function, which happens when the watermark loads. That may not fire until way after canvasbg.onload fires off, which is where you get the dataURL.

So move the image append into code at the end of the wm.onload callback and you should be good.