HTML5 Canvas -Größen -Größen (Downskale) Bild hohe Qualität? ⇐ HTML

[Anonymous]

Ich verwende HTML5 -Leinwandelemente, um die Größe der Bilder in meinem Browser zu ändern. Es stellt sich heraus, dass die Qualität sehr niedrig ist. Ich fand Folgendes: Deaktivieren Sie die Interpolation beim Skalieren von , aber es hilft nicht, die Qualität zu erhöhen. Browser?

Code: Select all

canvas, img {
image-rendering: optimizeQuality;
image-rendering: -moz-crisp-edges;
image-rendering: -webkit-optimize-contrast;
image-rendering: optimize-contrast;
-ms-interpolation-mode: nearest-neighbor;
}
< /code>
JS: < /p>
var $img = $('');
var $originalCanvas = $('');
$img.load(function() {

var originalContext = $originalCanvas[0].getContext('2d');
originalContext.imageSmoothingEnabled = false;
originalContext.webkitImageSmoothingEnabled = false;
originalContext.mozImageSmoothingEnabled = false;
originalContext.drawImage(this, 0, 0, 379, 500);
});

Das Bild hat sich mit Photoshop geändert: