jquery - 圆顶背景图像的画布 drawImage

Question

我正在尝试使用画布将 dom 元素背景图像的一部分绘制到画布标签。这是我现在所拥有的。

var draw = function( data ){
    var canvasStr = '<canvas id="highlight" width='300' height='200'></canvas>' 
    var canvasEl = $(canvasStr).appendTo( wrapper );
    var context = canvasEl.get(0).getContext('2d');
    var imgSource = wrapper.find('.invoice').get(0);
    context.drawImage(imgSource, 0, 0, 300, 200);
}

看起来它无法直接从 jquery 读取 imageSource。我将如何做才能让它发挥作用。

Answer 1

尝试

context.drawImage(imgSource[0], 0, 0, 300, 200);

您将 jquery 对象传递给 drawImage 而不是图像对象。还要确保在将图像绘制到画布之前加载图像。

编辑：

抱歉，没有发现该图像是背景图像。在这种情况下，您将需要从背景图像的源创建一个新图像。像这样的东西......

var img = new Image();
img.src = $(wrapper.find('.invoice').get(0)).css('background-image').replace(/^url\(["']?/, '').replace(/["']?\)$/, '');
img.onload = function() {
    context.drawImage(img, 0, 0, 300, 200);
};

你明白我的意思是确保图像已加载吗？图像需要时间通过网络加载，因此一旦您设置源，它就不会可用。您必须设置一个 onload 处理程序以确保可以绘制该图像。