canvas toDataURL没有返回完整的图像

Question

我正在构建一个水印图像的jQuery插件（是的，我很清楚javascript/html5水印系统的缺点，但现在只是忽略了这一点）。基本对于每个图像的方法是：

• 将图像粘贴到画布
• 的背景添加数据用于在该水印图像，
• 与画布的替换原始图像的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直接转储到页面进行测试，这就是我所看到的...左边是画布元素，右边是具有数据url的图像：

所以是的，现在已经让我陷入了困境了几天。我可能错过了一些非常明显的东西，但我看不到它。

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

Answer 1

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

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回调结束时将图像附加到代码中，您应该很好。