canvas toDataURL没有返回完整的图像

时间:2012-07-20 23:49:37

标签: javascript jquery html5 canvas

我正在构建一个jQuery插件,用于水印图像(是的,我很清楚javascript / html5水印系统的众多缺点,但暂时忽略它。)每个图像的基本方法是:< / p>

  • 将图像粘贴到画布的背景
  • 在其上添加水印图像的数据,
  • 将原始图像的src替换为画布的src(现在包含水印。)

现在,如果我用画布本身替换图像元素,它似乎工作正常..所有元素都出现在画布上。但是当我得到画布的dataURL时,除了最后一个图像之外的所有图像都显示出来。我甚至不介意,除了这个插件也需要替换图像的链接,所以用数据网址(带水印)替换hrefs。

这是当前的代码:

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

我添加了一行将数据url的图像直接转储到页面上进行测试,这就是我看到的......左边是canvas元素,右边是带有数据url的图像:< / p>

on the left is the canvas, on the right is the image

所以是的,这让我难倒了好几天了。我可能错过了一些非常明显的东西,但我看不到它。

...编辑因为示例不再在线。抱歉。

1 个答案:

答案 0 :(得分:3)

首先,不要为标记构建一个大的字符串缓冲区。

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

或者如果您愿意:

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

其次,在绘制水印之前,您将获得画布的dataURL。绘图发生在wm.onload回调函数中,该函数在加载水印时发生。在canvasbg.onload触发后,这可能不会触发,这是您获取dataURL的地方。

因此,在wm.onload回调结束时将图像追加到代码中,你应该很好。