web-dev-qa-db-ja.com

キャンバスに画像を追加する方法

HTMLの新しいキャンバス要素を少し試しています。

キャンバスに画像を追加したいだけですが、何らかの理由で機能しません。

私は次のコードを持っています：

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エラーは発生しません。画像は表示されません。

それは私が逃した本当にシンプルなものでなければなりません...

javascripthtml5canvas
92
PeeHaa

画像を読み込むまで待ってから描画する必要があるかもしれません。代わりにこれを試してください：

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コールバックに画像を描画します。

188
Thomas

キャンバスに画像を描画するサンプルコードは次のとおりです。

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

4
nvivekgoyal

私の場合、関数パラメーターを間違えました。

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

あなたがそれらを期待するなら

context.drawImage(image, width, height);

質問で説明したのと同じ効果で、画像をキャンバスのすぐ外側に配置します。

1
Marc