Schlechte Qualität von Bildern im png-Format gezogen, in html-canvas
Ich versuche zu zeichnen, das png-Bild in den canvas-Bereich, aber die Qualität ist wirklich schlecht.
Ich mache das mit der Methode drawImage-Methode:
src = folder+self.cur+".png";
imageObj.src = src;
imageObj.onload = function() {
context.clearRect(0, 0, cv, ch), context.drawImage(imageObj, 0, 0, cv, ch)
};
Anbei ein Originalbild und der screenshot des Ergebnisses in der Leinwand. Jetzt Leinwand Maße sind die gleichen wie das Bild, so dass das problem nicht durch die Größenänderung.
Irgendwelche Ideen, was das Problem verursacht und wie es zu lösen?
Hier ist ein jfiddle mit einem Beispiel.
- Bitte zeigen Sie den code, die Sie verwenden (eine Geige wäre super). Sie haben auch ein Komma (, statt ; ) zwischen klar und zeichnen Sie in den obigen Beispiel nicht sicher, ob das ein Tippfehler? Wenn keine Skalierung stattfindet, brauchen Sie nicht zu geben die Breite und Höhe für die Methode drawImage () - Methode.
- Hier ist ein jfiddle jsfiddle.net/UffUv/1
Du musst angemeldet sein, um einen Kommentar abzugeben.
Problem
Den Haupt-Fehler ist, dass Sie nicht geben Sie die Größe für das canvas-element - Sie sind nur unter Angabe der CSS die Größe für das element selbst, was bedeutet, dass der canvas-Kontext wird die Arbeit mit einer Standard-Größe von 300 x 150 Pixeln.
Führt dies zu dem Bild, das Sie zeigt nach unten skaliert werden zunächst 300 x 150, dann von der CSS bis zu der Größe, die Sie vorsätzlich (aber nicht haben), das schafft der verschwommene Blick.
Lösung
Zu beheben, müssen Sie ausdrücklich stellen Sie die Größe auf das canvas-element (in CSS-Pixel) und nicht mit einer CSS-Regel:
Und legen Sie Sie auf das canvas-element direkt als Eigenschaften und nicht als CSS:
Können Sie Optional festlegen, diese mit JavaScript
Geändert arbeiten fiddle hier
Dann das image zeichnen. Wie bereits im Kommentar erwähnt, es ist auch ein Tippfehler im code, und wenn Sie nicht die Größe von deinem Bild gibt es keine Notwendigkeit, geben Sie die Breite und Höhe.
Letzteres könnte geholfen haben, Debuggen Sie dieses problem, wenn Sie Links Sie aus, Sie hätten gesehen, dass das Bild zeichnen sehr groß in diesem Fall darauf hinweist, dass die Leinwand nicht die richtige Größe eingestellt.