HTML 5 Canvas切り抜きの結果が悪い場合

Question

私はhttp://yc.sg/fantaspic/compare.htmlで簡単なサンプルを作成しました。それは醜いだけで機能のためです。それはFileAPIを使用し、サーバー側には何も送信しませんので、写真を使ってみてください：P。 OK、それを使用するには、ブラウズし、写真を選択して[OK]をクリックして切り取ります。

左下の画像は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のcanvas要素は、ビューポートを設定し、それらに添付幅と高さ性質を持っていますキャンバスのこれらのプロパティは両方とも、ではなく、で、対応するCSSと同じです。

通常のビットマップイメージを考えてみましょう。画像のサイズは固定されており、ブラウザで変更することはできません。しかし、CSSの幅と高さのプロパティを使用すると、画像を拡大/縮小することができます。ブラウザーが単純なサイズ変更アルゴリズムを使用する傾向があるため、時にはそれはきれいではありません。

キャンバスと同じです。設定したビューポート（またはデフォルトのビューポート）は、ピクセルの描画先を決定するために使用されます。したがってビットマップが作成されます。はCSSでサイズが変更されます。

css値（320,320）がデフォルトのビューポート値（300,300）と異なるため、キャンバス画像が若干アップスケールされます。あなたのビューポートを事前に設定しようとすると、すべてが正常に見えるはずです。

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

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