HTML 5帆布裁剪結果質量差

Question

我在http://yc.sg/fantaspic/compare.html做了一個快速示例。這是醜陋的，只是在那裏的功能。它使用FileAPI，沒有任何內容發送到服務器端，所以請隨時嘗試使用任何照片：P。好的，要使用它，只需瀏覽，選擇一張照片並單擊確定，然後裁剪。

左下角的圖像使用HTML 5 canvas（原始圖像作爲源）重繪，而右下角的圖像只是原始圖像四處移動的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(); 
});