如何将图像添加到画布

我正在试验一下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

如何将图像添加到画布

回答

相关问题