如何将图片添加到画布中

Question

我正在尝试使用HTML中的新画布元素进行一些实验。

我只想在画布上添加一张图片，但出于某种原因它不起作用。

我有以下代码：

HTML

<canvas id="viewport"></canvas>

CSS (层叠样式表)

canvas#viewport { border: 1px solid white; width: 900px; }

JS的英文原文意思是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';
  context.drawImage(base_image, 100, 100);
}

这个图片是存在的，而且没有JavaScript错误。只是图片无法显示。

我肯定错过了一些非常简单的东西...

- PeeHaa

---

如果您想要加载多张图片，我建议使用 Promise，就像在 Loading images before rendering JS canvas 中所示。 - ggorlen

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

- Thomas

---

@swogger 而不是询问任何事情，尝试一下。那样运行得非常完美。确保首先检查源图像的大小，否则将被裁剪，除非您使用完整功能context.drawImage(base_image, 0, 0, 200, 200);。这将从0px位置绘制base_img，并具有200x200px的绘制区域。 - m3nda

这正是我的情况。我正在使用 new Image 将一些 blob 数据加载到画布中，想知道为什么它总是显示以前的图像。结果发现即使我从变量中加载图像，我仍然需要等待 onload 发生。谢谢！ - ᴍᴇʜᴏᴠ

如何添加图像样式？ - Sagar Rawal

如果CORS给你一个 This operation is insecure 错误，你可以尝试在new Image()语句后加上 base_image.crossOrigin = "anonymous";。 - ashleedawg

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。

- nvivekgoyal

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() 函数。

- Anthony Gedeon

Answer 4

在我的情况下，我错误地理解了函数参数，它们是：

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

如果你期望它们存在

context.drawImage(image, width, height);

您需要按照问题中所述的相同效果，将图像放置在画布外部。

- Marc

Answer 5

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的解释。

- Carson