如何在画布上添加图像

106

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

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

javascript html canvas

— 皮哈
source

219

也许您应该等到图像加载后才能绘制图像。尝试以下方法：

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

— 汤玛士
source

6

@swogger而不是问任何问题，请尝试。那很好。确保先检查源的img大小，否则将被裁剪，除非您使用完整功能context.drawImage(base_image, 0, 0, 200, 200);。这将从0px位置绘制base_img，绘制区域为200x200px。

— m3nda 2015年

1

这正是我的情况。我正在使用加载一些Blob数据到画布new Image，想知道为什么它总是向我显示以前的图像。事实证明，即使我正在从变量加载图像，我仍然必须等待onload发生。谢谢！

— aexl

如何添加图像样式？

— Sagar Rawal

6

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

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

— 活泼的
source

1

就我而言，我误认为函数参数是：

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

如果您希望他们成为

context.drawImage(image, width, height);

您可以将图像放置在画布外部，并具有与问题中所述相同的效果。

— 马克
source

0

您必须使用.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（）

— 安东尼·吉迪恩
source