如何將圖像添加到畫布

我正在試驗一下HTML中的新畫布元素。如何將圖像添加到畫布

我只是想將圖像添加到畫布上，但由於某種原因它不起作用。

我有以下代碼：

HTML

<canvas id="viewport"></canvas>

CSS

canvas#viewport { border: 1px solid white; width: 900px; }

var canvas = document.getElementById('viewport'), 
context = canvas.getContext('2d'); 

make_base(); 

function make_base() 
{ 
    base_image = new Image(); 
    base_image.src = 'img/base.png'; 
    context.drawImage(base_image, 100, 100); 
}

圖像存在，我沒有得到任何JavaScript錯誤。圖像只是不顯示。

它必須是很簡單的東西我已經錯過了......

來源

2011-05-15 PeeHaa

149

也許你應該要等到你畫之前加載圖像。試試這個：

var canvas = document.getElementById('viewport'), 
context = canvas.getContext('2d'); 

make_base(); 

function make_base() 
{ 
    base_image = new Image(); 
    base_image.src = 'img/base.png'; 
    base_image.onload = function(){ 
    context.drawImage(base_image, 0, 0); 
    } 
}

即，在圖像的onload回調中繪製圖像。

來源

2011-05-15 21:32:19 Thomas

這是否適用於通過URL獲取的圖像？ – swogger 2014-11-13 12:53:20

@swogger相當感謝問任何事，試試。這工作完美。請確保首先檢查源的img大小，否則將被裁剪，除非使用全功能'context.drawImage（base_image，0，0，200，200）;'。這將從0px位置繪製base_img，繪製面積爲200x200px。 – erm3nda 2015-02-16 04:52:00

這就是我的情況。我正在使用'new Image'將一些Blob數據加載到畫布中，並想知道爲什麼它總是向我展示以前的圖像。即使我從一個變量加載圖像，我仍然需要等待'onload'發生。謝謝！ – 2016-03-16 22:27:22

參考這個..希望這將有助於ü..

var erase_image = new Image(); 
erase_image.src = '../images/erazer.gif';   
erase_image.onload = function() 
{ 
    context.drawImage(erase_image, 78, 19); 
}

來源

2014-03-15 07:10:38

這與已經接受的答案有什麼不同？ – 2016-03-16 22:24:53

我期望它被剪切和粘貼來自同一個來源@TheSexiestManinJamaica – JasTonAChair 2016-10-06 09:53:47

-1

這裏是示例代碼對canvas-

$("#selectedImage").change(function(e) { 

var URL = window.URL; 
var url = URL.createObjectURL(e.target.files[0]); 
img.src = url; 

img.onload = function() { 
    var canvas = document.getElementById("myCanvas"); 
    var ctx = canvas.getContext("2d");   

    ctx.clearRect(0, 0, canvas.width, canvas.height); 
    ctx.drawImage(img, 0, 0, 500, 500); 
}});

繪製圖像在上面的代碼selectedImage是輸入控制，可以用來瀏覽系統上的圖像。對於樣本代碼的更多細節來繪製圖像在畫布上，同時保持高寬比：

http://newapputil.blogspot.in/2016/09/show-image-on-canvas-html5.html

來源

2016-11-03 08:48:41 nvivekgoyal

在我的情況，我弄錯的函數的參數，它們是：

context.drawImage(image, left, top); 
context.drawImage(image, left, top, width, height);

如果期望他們是

context.drawImage(image, width, height);

您將放置在畫布外部的圖像具有相同的效果題。

來源

2017-11-07 10:08:27 Marc

如何將圖像添加到畫布

回答

相關問題