Обрезка изображения на холст

Question

У меня 2 дивы

<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 - коэффициент, если размер изображения увеличенного предварительного просмотра.

Вот проблема: 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

Solution доступны для вас без использования серверной стороне (.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.