HTML5画布裁剪导致质量差

我很快就做了一个样品。它很难看，只是为了功能。它使用FileAPI，无需发送到服务器端，因此可以尝试使用任何照片：P.好的，要使用它，只需浏览，选择一张照片，然后单击“确定”，然后裁剪掉

左下角的图像是使用HTML5画布（原始图像作为源）重新绘制的，而右下角的图像只是一个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);
}

---

HTML5画布元素有宽度和高度属性，用于设置画布的视口。这两个属性与css对应的属性不相同

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

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

在您的示例中，画布图像的比例略微增大，因为您的css值（320320）与默认视口值（300300）不同。只要试着预先设置好你的视口，一切都会很好

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

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

---

HTML5画布元素有宽度和高度属性，用于设置画布的视口。这两个属性与css对应的属性不相同

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

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

在您的示例中，画布图像的比例略微增大，因为您的css值（320320）与默认视口值（300300）不同。只要试着预先设置好你的视口，一切都会很好

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

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

---

我看不出有什么不同。奥斯，我看不出有什么不同。OSX，操作员：谢谢。我已经按照你的建议做了，并在链接中更新了HTML，但是仍然存在明显的质量下降。谢谢：）。我已经按照你的建议做了，并在链接中更新了HTML，但是仍然存在明显的质量下降。