帆布drawImage圆顶背景图像

Question

我正在尝试使用canvas将一段dom元素背景图像绘制到canvas标记。 这就是我现在所拥有的。

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处理程序，以确保可以绘制图像。