帆布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圓頂背景圖像

回答

相關問題