Come aggiungere un'immagine alla tela

106

Sto sperimentando un po 'con il nuovo elemento canvas in HTML.

Voglio semplicemente aggiungere un'immagine alla tela ma per qualche motivo non funziona.

Ho il codice seguente:

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

L'immagine esiste e non ricevo errori JavaScript. L'immagine semplicemente non viene visualizzata.

Deve essere qualcosa di veramente semplice che mi è mancato ...

javascript html canvas

— PeeHaa
fonte

219

Forse dovresti aspettare che l'immagine venga caricata prima di disegnarla. Prova questo invece:

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

Vale a dire disegnare l'immagine nel callback onload dell'immagine.

— Tommaso
fonte

6

@swogger piuttosto grazie chiedi qualsiasi cosa, prova. Ha funzionato perfettamente. Assicurati di controllare prima la dimensione img della sorgente, altrimenti verrà ritagliata a meno che non utilizzi la funzione completa context.drawImage(base_image, 0, 0, 200, 200);. Ciò attingerebbe base_img dalla posizione 0px, con un'area di disegno di 200x200px.

— m3nda

1

Questo era esattamente il mio caso. Stavo caricando alcuni dati del blob nella tela usando new Imagee mi chiedevo perché mi mostrava sempre un'immagine precedente. Risulta che anche se sto caricando un'immagine da una variabile devo ancora aspettare onloadche accada. Grazie!

— aexl

Come aggiungere lo stile dell'immagine?

— Sagar Rawal

6

ecco il codice di esempio per disegnare un'immagine su tela-

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

Nel codice precedente selectedImage è un controllo di input che può essere utilizzato per sfogliare l'immagine sul sistema. Per maggiori dettagli sul codice di esempio per disegnare un'immagine su tela mantenendo le proporzioni:

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

— nvivekgoyal
fonte

1

Nel mio caso, ho sbagliato i parametri della funzione, che sono:

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

Se ti aspetti che lo siano

context.drawImage(image, width, height);

posizionerai l'immagine appena fuori dalla tela con gli stessi effetti descritti nella domanda.

— Marc
fonte

0

Devi usare .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)
    }
}

Ecco perché

Se stai caricando l'immagine prima dopo che la tela è già stata creata, la tela non sarà in grado di passare tutti i dati dell'immagine per disegnare l'immagine. Quindi devi prima caricare tutti i dati forniti con l'immagine e poi puoi usare drawImage ()

— Anthony Gedeon
fonte