Bagaimana cara menambahkan gambar ke kanvas

106

Saya bereksperimen sedikit dengan elemen kanvas baru di HTML.

Saya hanya ingin menambahkan gambar ke kanvas tetapi tidak berhasil karena beberapa alasan.

Saya memiliki kode berikut:

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

Gambar ada dan saya tidak mendapatkan kesalahan JavaScript. Gambar tidak ditampilkan.

Pasti sesuatu yang sangat sederhana yang saya lewatkan ...

javascript html canvas PeeHaa
sumber

Jawaban:

219

Mungkin Anda harus menunggu hingga gambar dimuat sebelum Anda menggambarnya. Coba ini sebagai gantinya:

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

Yaitu menggambar gambar di callback onload gambar.

Thomas
sumber
6
@swogger lebih suka terima tanya apa, coba. Itu bekerja dengan sempurna. Pastikan Anda memeriksa terlebih dahulu ukuran img dari sumber, jika tidak akan dipotong kecuali Anda menggunakan fungsi penuh context.drawImage(base_image, 0, 0, 200, 200);. Itu akan menggambar base_img dari posisi 0px, dengan area gambar 200x200px.
m3nda
1
Ini persis kasus saya. Saya memuat beberapa data blob ke kanvas menggunakan new Imagedan bertanya-tanya mengapa itu selalu menunjukkan gambar sebelumnya. Ternyata meskipun saya memuat gambar dari variabel, saya masih harus menunggu hal itu onloadterjadi. Terima kasih!
aexl
Bagaimana cara menambahkan gaya gambar?
Sagar Rawal
6

berikut adalah contoh kode untuk menggambar gambar di kanvas-

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

Pada kode di atas, selectedImage adalah kontrol input yang dapat digunakan untuk menelusuri gambar pada sistem. Untuk detail selengkapnya tentang kode sampel untuk menggambar di kanvas dengan tetap mempertahankan rasio aspek:

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

nvivekgoyal
sumber
1

Dalam kasus saya, saya salah mengira parameter fungsi, yaitu:

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

Jika Anda mengharapkannya

context.drawImage(image, width, height);

Anda akan menempatkan gambar tepat di luar kanvas dengan efek yang sama seperti yang dijelaskan dalam pertanyaan.

Marc
sumber
0

Anda harus menggunakan .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)
    }
}

Inilah Alasannya

Jika Anda memuat gambar terlebih dahulu setelah kanvas dibuat, maka kanvas tidak akan bisa melewatkan semua data gambar untuk menggambar gambar. Jadi, pertama-tama Anda harus memuat semua data yang disertakan dengan gambar, lalu Anda dapat menggunakan drawImage ()

Anthony Gedeon
sumber