如何添加图像到画布

我正在对 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 错误。该图像只是不显示。

一定是我错过了什么很简单的东西。

328913 次浏览
小开
最佳答案

您需要等到图像加载完成后才能绘制它。请尝试以下方法:

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 回调中绘制图像。

小开

下面是在画布上绘制图像的示例代码-

$("#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

小开

在我的例子中，我弄错了函数参数，它们是:

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

如果你希望他们是的话

context.drawImage(image, width, height);

你可以把图片放在画布外面，效果和问题中描述的一样。

小开

你必须使用。卸载

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)
}
}

这就是原因

如果您在画布已经创建之后首先加载图像，那么画布将无法传递所有图像数据来绘制图像。因此，首先需要加载图像附带的所有数据，然后才能使用 draImage ()

小开

DraImage 提供了三种方式供您选择。

drawImage(image: CanvasImageSource, dx: number, dy: number): void;
drawImage(image: CanvasImageSource, dx: number, dy: number, dw: number, dh: number): void;
drawImage(image: CanvasImageSource, sx: number, sy: number, sw: number, sh: number, dx: number, dy: number, dw: number, dh: number): void;
  • 目的地
  • 资料来源:

或者你可以参考 学校画布图像的解释。


提交答案