title: Crop image to canvas
body: <p>I have 2 divs</p>
  
  <pre><code>&lt;div id="image-orig"&gt;
      &lt;img src="image_example.jpg"/&gt;
  &lt;/div&gt;
  
  &lt;div id="image-crop"&gt;
      &lt;canvas id="preview" style="width:548px;height:387px"&gt;&lt;/canvas&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>image_example.jpg can be image any size.</p>
  
  <pre><code>    function updatePreview(c) {
          if(parseInt(c.w) &gt; 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())
              });
      });
  </code></pre>
  
  <p>coeff - it's coefficient if size image larger div preview.</p>
  
  <p>That's problem:
  <a href="http://dbwap.ru/3725988.png" rel="nofollow">http://dbwap.ru/3725988.png</a></p>
  
  <p>In second div (canvas). Quality image very low.</p>
  
  <p><strong>SOLUTION IS FOUND</strong></p>
  
  <pre><code>            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();
  </code></pre>
  
  <p>I'm just creating image tag and copying from canvas to image.</p>