HTML 5 画布裁剪导致质量不佳

Question

我在http://yc.sg/fantaspic/compare.html 做了一个快速示例。它很丑，只是为了功能。它使用 FileAPIs，没有任何东西可以发送到服务器端，所以请随意尝试使用任何照片：P。好的，要使用它，只需浏览，选择一张照片并单击确定，然后裁剪即可。

左下角的图像是使用 HTML 5 画布重绘的（以原始图像为源），而右下角的图像只是一个 div，原始图像被四处移动。画布图像总是导致质量较低，尽管它只是一个简单的裁剪。

您可以查看源代码并了解它是如何工作的，但主要的裁剪方法是这样的：

function preview(img, selection) {
        var scaleX = previewWidth / selection.width; 
        var scaleY = previewHeight / selection.height; 

        $('#cropped-image').css({ 
            width: Math.round(scaleX * truew) + 'px', 
            height: Math.round(scaleY * trueh) + 'px',
            marginLeft: '-' + Math.round(scaleX * selection.x1) + 'px', 
            marginTop: '-' + Math.round(scaleY * selection.y1) + 'px' 
        });

        selx1 = selection.x1;
        sely1 = selection.y1;
        selx2 = selection.x2;
        sely2 = selection.y2;
        selw = selection.width;
        selh = selection.height;

        var canvas = $("#preview")[0];
        var context = canvas.getContext("2d");
        context.drawImage(img, selx1, sely1, selw, selh, 0, 0, canvas.width, canvas.height);
}

Answer 1

HTML5 画布元素具有附加的 width 和 height 属性，用于设置画布的视口。这两个属性不与其对应的 css 属性相同。

考虑一个常规的位图图像。图像的大小是固定的，不能在浏览器中更改。但是，css 的宽度和高度属性允许您缩放和扭曲图像。有时这并不漂亮，因为浏览器倾向于使用简单的大小调整算法。

您的画布也是如此。您设置的视口（或默认视口）用于确定像素的绘制位置。因此，创建了一个位图，之后通过 css 调整大小。

在您的情况下，画布图像略微放大，因为您的 css 值（320、320）与默认视口值（300,300）不同。只需尝试提前设置您的视口，一切都应该看起来不错。

$(function () {
  var $preview = $("#preview"), 
      preview = $preview[0];

  preview.width  = $preview.width();
  preview.height = $preview.height();
});