So fügen Sie der Leinwand ein Bild hinzu

105

Ich experimentiere ein bisschen mit dem neuen Canvas-Element in HTML.

Ich möchte einfach ein Bild zur Leinwand hinzufügen, aber es funktioniert aus irgendeinem Grund nicht.

Ich habe folgenden Code:

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

Das Bild existiert und ich bekomme keine JavaScript-Fehler. Das Bild wird einfach nicht angezeigt.

Es muss etwas wirklich Einfaches sein, das ich vermisst habe ...

javascript html canvas PeeHaa
quelle

Antworten:

218

Möglicherweise sollten Sie warten müssen, bis das Bild geladen ist, bevor Sie es zeichnen. Versuchen Sie stattdessen Folgendes:

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

Dh das Bild im Onload-Rückruf des Bildes zeichnen.

Thomas
quelle
6
@swogger lieber danke etwas fragen, ausprobieren. Das hat perfekt funktioniert. Stellen Sie sicher, dass Sie zuerst die IMG-Größe der Quelle überprüfen. Andernfalls wird sie zugeschnitten, sofern Sie nicht die volle Funktion verwenden context.drawImage(base_image, 0, 0, 200, 200);. Das würde base_img von der 0px-Position mit einer Zeichenfläche von 200x200px zeichnen.
m3nda
1
Das war genau mein Fall. Ich habe einige Blob-Daten mit auf die Leinwand geladen new Imageund mich gefragt, warum mir immer ein vorheriges Bild angezeigt wurde. Selbst wenn ich ein Bild aus einer Variablen lade, muss ich noch warten, onloadbis das passiert. Danke dir!
Aexl
Wie füge ich einen Bildstil hinzu?
Sagar Rawal
6

Hier ist der Beispielcode zum Zeichnen von Bildern auf Leinwand.

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

Im obigen Code ist selectedImage ein Eingabesteuerelement, mit dem Bilder auf dem System durchsucht werden können. Weitere Details zum Beispielcode zum Zeichnen von Bildern auf Leinwand unter Beibehaltung des Seitenverhältnisses:

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

nvivekgoyal
quelle
1

In meinem Fall habe ich die Funktionsparameter falsch verstanden:

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

Wenn Sie es erwarten

context.drawImage(image, width, height);

Sie platzieren das Bild direkt außerhalb der Leinwand mit den gleichen Effekten wie in der Frage beschrieben.

Marc
quelle
0

Sie müssen .onload verwenden

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

Hier ist der Grund

Wenn Sie das Bild zuerst laden, nachdem die Leinwand bereits erstellt wurde, kann die Leinwand nicht alle Bilddaten zum Zeichnen des Bildes übergeben. Sie müssen also zuerst alle Daten laden, die mit dem Bild geliefert wurden, und dann können Sie drawImage () verwenden.

Anthony Gedeon
quelle