裁剪图像到画布

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帆布。