Javascript 如何将图像添加到画布
我正在尝试在HTML中使用新的canvas元素 我只是想在画布上添加一个图像,但由于某些原因,它不起作用 我有以下代码: HTMLJavascript 如何将图像添加到画布,javascript,html,canvas,Javascript,Html,Canvas,我正在尝试在HTML中使用新的canvas元素 我只是想在画布上添加一个图像,但由于某些原因,它不起作用 我有以下代码: HTML <canvas id="viewport"></canvas> JS canvas#viewport { border: 1px solid white; width: 900px; } var canvas = document.getElementById('viewport'), context = canvas.getContex
<canvas id="viewport"></canvas>
JS
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错误。图像就是不显示
这一定是我错过的非常简单的东西…您需要等待图像加载后再绘制。请尝试以下方法:
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.在图像的onload回调中绘制图像。以下是在画布上绘制图像的示例代码-
$("#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是一个输入控件,可用于浏览系统上的图像。
有关在画布上绘制图像同时保持纵横比的示例代码的更多详细信息,请参见:
在我的例子中,我错了函数参数,它们是:
context.drawImage(image, left, top);
context.drawImage(image, left, top, width, height);
如果你希望他们
context.drawImage(image, width, height);
您将使用与问题中所述相同的效果将图像放置在画布外。您必须使用。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()@swogger。如果您有任何疑问,请尝试一下。这非常有效。确保首先检查源代码的img大小,否则将被裁剪,除非您使用完整的函数
context.drawImage(base_image,0,0,200,200)代码>。这将从0px位置绘制基本图像,绘制面积为200x200px。这正是我的情况。我正在使用新图像
将一些blob数据加载到画布中,不知道为什么它总是显示我以前的图像。结果是,即使我从变量加载图像,我仍然必须等待onload
发生。非常感谢。如何添加图像样式?