如何将图像添加到画布
如何将图像添加到画布
提问于 2011-05-16 05:28:52
我正在对HTML中的新画布元素进行一些试验。
我只是想在画布上添加一个图像，但由于某些原因无法工作。
我有以下代码：
HTML
<canvas id="viewport"></canvas>CSS
canvas#viewport { border: 1px solid white; width: 900px; }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);
}镜像存在，并且我没有收到任何JavaScript错误。图像就是不显示。
一定是我错过了一些非常简单的东西...
回答 5
Stack Overflow用户
回答已采纳
发布于 2011-05-16 05:32:19
您需要等待图像加载完成后才能绘制它。试着这样做：
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回调中绘制图片。
Stack Overflow用户
发布于 2016-11-03 16:48:42
以下是在画布上绘制图像的示例代码-
$("#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
Stack Overflow用户
发布于 2020-04-10 10:27:36
您必须使用.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)
}
}这就是为什么使用
如果您是在画布创建之后才加载图像，那么画布将无法传递所有图像数据来绘制图像。因此，您需要首先加载图像附带的所有数据，然后才能使用drawImage()
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/6011378
复制相关文章
相似问题