14
HTML5 Canvas Resize(Downscale)Image High Quality?
私はhtml5キャンバス要素を使用して、ブラウザーで画像のサイズを変更します。品質が非常に低いことが判明しました。私はこれを見つけました:<canvas>のスケーリング時に補間を無効にしますが、品質の向上には役立ちません。 以下は、CSSとJSのコードと、Photoshopで呼び出され、キャンバスAPIで拡大縮小された画像です。 ブラウザで画像を拡大縮小するときに最適な品質を得るにはどうすればよいですか? 注:大きな画像を小さな画像に縮小し、キャンバスの色を変更して、結果をキャンバスからサーバーに送信します。 CSS: canvas, img { image-rendering: optimizeQuality; image-rendering: -moz-crisp-edges; image-rendering: -webkit-optimize-contrast; image-rendering: optimize-contrast; -ms-interpolation-mode: nearest-neighbor; } JS: var $img = $('<img>'); var $originalCanvas = $('<canvas>'); $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); }); photoshopでサイズ変更された画像: …