帆布drawImage圆顶背景图像

我想使用画布绘制一个dom元素背景图像的一部分到画布标记。这是我现在所拥有的。帆布drawImage圆顶背景图像

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。我将如何去做这件事使它工作。

来源

2012-08-06 Chapsterj

尝试

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

来源

2012-08-06 21:03:31 hackattack

感谢hackattack的帮助。你是什么意思确保它的加载？它是一个div的风格背景图像。

这是在页面加载时添加的。在加载页面后，drawImage会在点击时被调用。另外它不是一个jQuery对象，它是一个dom对象，这就是为什么我使用get（0）将它从jquery对象转换为dom元素的原因。 var imgSource = wrapper.find（'。invoice'）。get（0）; – Chapsterj 2012-08-06 21:09:30

对不起，阅读我的编辑我希望能够更好地帮助 – hackattack 2012-08-06 21:20:21

因此，您必须创建一个动态对象来保存图像并加载它。没有办法找到已经存在的图像？再次感谢您的帮助 – Chapsterj 2012-08-06 21:22:39

帆布drawImage圆顶背景图像

回答

相关问题