canvas toDataURL没有返回完整的图像 [英] canvas toDataURL not returning a complete image
问题描述
我正在构建一个jQuery插件，用于水印图像（是的，我很清楚javascript / html5水印系统的众多缺点，但暂时忽略它。）每个图像的基本方法是：
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:
- 将图像粘贴到画布的背景
- 添加水印数据图像，
- 将原始图像的src替换为画布的src（现在包含水印。）
现在，如果我用画布本身替换图像元素，它似乎工作正常..所有元素都出现在画布上。但是当我得到画布的dataURL时，除了最后一个图像之外的所有图像都显示出来。我甚至不介意，除了这个插件也需要替换图像链接，所以用数据网址（带水印）替换hrefs。
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.)
这个是当前代码：
(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.
推荐答案
首先，不要为标签构建一个大的字符串缓冲区。
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);
或者如果您愿意：
$('body').append($('<img>').attr('src', canvas.toDataURL()))
其次，在绘制水印之前，您将获得画布的dataURL。绘图发生在 wm.onload 回调函数中，该函数在加载水印时发生。在 canvasbg.onload 触发后，这可能不会触发，这是你获得dataURL的地方。
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.
所以将图像附加到 wm.onload 回调末尾的代码中，你应该很好。
So move the image append into code at the end of the wm.onload callback and you should be good.
这篇关于canvas toDataURL没有返回完整的图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
