Javascript 如何将图像添加到画布
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6011378/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to add image to canvas
提问by PeeHaa
I'm experimenting a bit with the new canvas element in HTML.
我正在尝试使用 HTML 中的新画布元素。
I simply want to add an image to the canvas but it doesn't work for some reason.
我只是想在画布上添加一个图像，但由于某种原因它不起作用。
I have the following code:
我有以下代码：
HTML
HTML
<canvas id="viewport"></canvas>
CSS
CSS
canvas#viewport { border: 1px solid white; width: 900px; }
JS
JS
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);
}
The image exists and I get no JavaScript errors. The image just doesn't display.
图像存在并且我没有收到 JavaScript 错误。图像只是不显示。
It must be something really simple I've missed...
这一定是我错过的一些非常简单的事情......
回答by Thomas
Maybe you should have to wait until the image is loaded before you draw it. Try this instead:
也许您应该等到图像加载完毕后再绘制。试试这个：
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);
}
}
I.e. draw the image in the onload callback of the image.
即在图像的 onload 回调中绘制图像。
回答by nvivekgoyal
here is the sample code to draw image on 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);
}});
In the above code selectedImage is an input control which can be used to browse image on system. For more details of sample code to draw image on canvas while maintaining the aspect ratio:
在上面的代码中 selectedImage 是一个输入控件，可用于在系统上浏览图像。有关在保持纵横比的同时在画布上绘制图像的示例代码的更多详细信息：
http://newapputil.blogspot.in/2016/09/show-image-on-canvas-html5.html
http://newapputil.blogspot.in/2016/09/show-image-on-canvas-html5.html
回答by Marc
In my case, I was mistaken the function parameters, which are:
就我而言，我弄错了函数参数，它们是：
context.drawImage(image, left, top);
context.drawImage(image, left, top, width, height);
If you expect them to be
如果你期望他们
context.drawImage(image, width, height);
you will place the image just outside the canvas with the same effects as described in the question.
您会将图像放置在画布外，效果与问题中描述的相同。
回答by Anthony Gedeon
You have to use .onload
你必须使用 .onload
let canvas = document.getElementById("myCanvas");
let ctx = canvas.getContext("2d");
const drawImage = (url) => {
const image = new Image();
image.src = url;
image.onload = () => {
ctx.drawImage(image, 0, 0)
}
}
Here's Why
这就是为什么
If you are loading the image first after the canvas has already been created then the canvas won't be able to pass all the image data to draw the image. So you need to first load all the data that came with the image and then you can use drawImage()
如果在创建画布后首先加载图像，则画布将无法传递所有图像数据来绘制图像。所以你需要首先加载图像附带的所有数据，然后你可以使用 drawImage()
