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画布元素附加了宽度和高度属性，用于设置画布的视口。这两个属性不与其css对应物相同。

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

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

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

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

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

HTML 5 Canvas裁剪导致质量不佳

1 个答案: