相关疑难解决方法(0)

我使用html5 canvas元素在浏览器中调整图像大小.事实证明,质量非常低.我发现:在缩放<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调整图像大小:

图像在画布上调整大小:

编辑:

我尝试按照以下方案中提出的多个步骤进行缩减:

调整HTML5画布和 Html5画布中的图像大小drawImage:如何应用抗锯齿

这是我用过的功能:

function resizeCanvasImage(img, canvas, maxWidth, maxHeight) {
    var imgWidth = img.width, 
        imgHeight = img.height;

    var ratio = 1, ratio1 …

请看下面的例子:

http://jsfiddle.net/MLGr4/47/

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");

img = new Image();
img.onload = function(){
    canvas.width = 400;
    canvas.height = 150;
    ctx.drawImage(img, 0, 0, img.width, img.height, 0, 0, 400, 150);
}
img.src = "http://openwalls.com/image/1734/colored_lines_on_blue_background_1920x1200.jpg";

如您所见,虽然据说drawImage会自动应用抗锯齿,但图像不会消除锯齿.我尝试了很多不同的方法,但似乎没有用.你能告诉我如何获得抗锯齿图像吗？谢谢.

当我将775 x 775图像添加到fabricjs画布并将其调整为大约90 x 90时,图像会大大降低其质量.

但是如果我将相同的图像添加到一个<img/>并将其缩小,它就会保留其质量.

为什么画布图像质量如此之低？如何使画布图像保持原始质量<img/>？

需要使用HTML5画布生成大约约20k的.png图像.不幸的是,在使用toDataURL()方法创建.png时,您无法像使用jpegs那样指定质量.

任何解决方法的想法？toDataURL似乎是从Canvas生成图像的唯一方法,而canvas似乎是没有服务器交互的图像处理的最佳工具.感谢任何建议.