裁剪圖像到畫布

Question

我有2周的div

<div id="image-orig"> 
    <img src="image_example.jpg"/> 
</div> 

<div id="image-crop"> 
    <canvas id="preview" style="width:548px;height:387px"></canvas> 
</div> 

image_example.jpg可以是任何尺寸的圖像。

function updatePreview(c) { 
     if(parseInt(c.w) > 0) { 
      var orig = $("#image-orig img")[0]; 
      var canvas = $("#image-crop canvas")[0]; 
      var context = canvas.getContext("2d"); 

      context.drawImage(orig, 
       c.x*coeff,c.y*coeff,c.w*coeff,c.h*coeff, 
       0,0,canvas.width,canvas.height 
      ); 
     } 
    } 

    $(function(){ 
      $('#image-orig img').Jcrop({ 
       onSelect: updatePreview, 
       onChange: updatePreview, 
       aspectRatio : parseFloat($('#image-orig img').width()/$('#image-orig img').height()) 
      }); 
    }); 

coeff - 它的係數如果大小圖像較大的div預覽。

這就是問題： http://dbwap.ru/3725988.png

在第二個div（畫布）。質量圖像非常低。

找到解決

  canvas.width = c.w*coeff; 
      canvas.height = c.h*coeff; 

      context.drawImage(orig, 
       c.x*coeff,c.y*coeff,c.w*coeff,c.h*coeff, 
       0,0,c.w*coeff,c.h*coeff 
      ); 
      $(that.el).find("#ImageCode").attr('src', canvas.toDataURL()); 
      $(that.el).find("#ImageCode").show(); 

我只是創建圖像標籤和複製從畫布圖像。

Answer 1

如果你有機會到.NET，您可以修改您的新圖像保存JCrop方式：提供給您 http://mironabramson.com/blog/post/2009/04/Cropping-image-using-jQuery,-Jcrop-and-ASPNET.aspx

解決方案，而無需使用服務器端（.NET/PHP）：

首先，確保當您使用JCrop你有HTML5畫布圖像平滑啓用：

http://www.whatwg.org/specs/web-apps/current-work/multipage/the-canvas-element.html

如果已經設置，或沒有效果，那麼我認爲你唯一的其他選擇，調查通過每個瀏覽器提供給您的圖像選項：

在Mozilla平滑 - 看到這篇文章爲例（找「mozImageSmoothingEnabled」）：https://developer.mozilla.org/en/Canvas_tutorial/Using_images#Controlling_image_scaling_behavior

在IE應用過濾器：http://code.flickr.com/blog/2008/11/12/on-ui-quality-the-little-things-client-side-image-resizing/

注：可能有某種形式的閃存解決方案，它可以工作，但它很可能是太難用JCrop任何閃存解決方案相結合和ht ml5帆布。