如何将图像添加到画布

Question

我正在尝试使用 HTML 中的新 canvas 元素。

我只是想将图像添加到画布上，但由于某种原因它不起作用。

我有以下代码：

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 错误。图像只是不显示。

这一定是我错过的非常简单的事情......

Answer 1

您需要等到图像加载后才能绘制。请尝试以下操作：

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

Answer 2

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

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

Answer 3

您必须使用 .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()

Answer 4

context.drawImage提供了三种方式供您选择。

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; 

• d: 目的地
• s: 源

---

或者您可以参考 w3school-canvas drawImage 的说明。

Answer 5

就我而言，我弄错了函数参数，它们是：

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

如果您期望它们是，

context.drawImage(image, width, height);

您将把图像放置在画布之外，其效果与问题中描述的效果相同。