javascript - Canvas'e resim nasıl eklenir

HTML'deki yeni canvas öğesiyle biraz deneme yapıyorum.

Sadece bir resmi tuvale eklemek istiyorum ama nedense çalışmıyor.

Aşağıdaki koda sahibim:

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

Görüntü mevcut ve herhangi bir JavaScript hatası almıyorum. Görüntü sadece görüntülenmiyor.

Kaçırmış olabileceğim gerçekten basit bir şey olmalı...

Cevap #1

Resmi çizmeye başlamadan önce yüklenmesini beklemeniz gerekiyor. Bunun yerine şunu deneyin:

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

yani, resmi görüntünün onload geri çağırmasında çizin.

Cevap #2

işte tuval üzerine resim çizmek için örnek kod-

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

Yukarıdaki koddaki selectedImage, sistemde resim gezmek için kullanılabilecek bir giriş kontrolüdür. Resmi en-boy oranını koruyarak tuval üzerine çizmek için örnek kod hakkında daha fazla detay için:

http://newapputil.blogspot.in/2016/09/show-image-on-canvas-html5.html

İlgili makaleler