Jak dodać obraz do płótna

106

Trochę eksperymentuję z nowym elementem canvas w HTML.

Chcę po prostu dodać obraz do płótna, ale z jakiegoś powodu nie działa.

Mam następujący kod:

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

Obraz istnieje i nie ma błędów JavaScript. Obraz po prostu się nie wyświetla.

To musi być coś naprawdę prostego, za czym tęskniłem ...

javascript html canvas PeeHaa
źródło

Odpowiedzi:

219

Może powinieneś poczekać, aż obraz zostanie załadowany, zanim go narysujesz. Spróbuj tego zamiast tego:

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

To znaczy narysuj obraz w wywołaniu zwrotnym obrazu.

Tomasz
źródło
6
@swogger raczej dziękuję, zapytaj o wszystko, wypróbuj. To działało doskonale. Upewnij się, że najpierw sprawdziłeś rozmiar img źródła, w przeciwnym razie zostanie przycięty, chyba że używasz pełnej funkcji context.drawImage(base_image, 0, 0, 200, 200);. To spowodowałoby rysowanie base_img z pozycji 0px, z obszarem rysowania 200x200px.
m3nda
1
To był dokładnie mój przypadek. Ładowałem dane blob do kanwy new Imagei zastanawiałem się, dlaczego zawsze wyświetlał poprzedni obraz. Okazuje się, że nawet jeśli ładuję obraz ze zmiennej, nadal muszę czekać, aż to onloadsię stanie. Dziękuję Ci!
aexl
Jak dodać styl obrazu?
Sagar Rawal
6

oto przykładowy kod do rysowania obrazu na płótnie-

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

W powyższym kodzie selectedImage jest kontrolką wejściową, której można użyć do przeglądania obrazu w systemie. Aby uzyskać więcej informacji na temat przykładowego kodu do rysowania obrazu na płótnie przy zachowaniu współczynnika proporcji:

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

nvivekgoyal
źródło
1

W moim przypadku pomyliłem się z parametrami funkcji, którymi są:

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

Jeśli tego oczekujesz

context.drawImage(image, width, height);

umieścisz obraz tuż poza obszarem roboczym z tymi samymi efektami, jak opisano w pytaniu.

Marc
źródło
0

Musisz użyć .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)
    }
}

Dlatego

Jeśli wczytujesz obraz najpierw po utworzeniu płótna, płótno nie będzie w stanie przekazać wszystkich danych obrazu w celu narysowania obrazu. Musisz więc najpierw załadować wszystkie dane, które przyszły z obrazem, a następnie możesz użyć drawImage ()

Anthony Gedeon
źródło