JCrop으로 캔버스로 그려진 이미지 자르기

저는 HTML5를 처음 사용하고 JCrop으로 이미지를 자르려고합니다. 직접 자르려면 문제가 없지만 캔버스로 그릴 때 JCrop은 작동하지 않습니다.JCrop으로 캔버스로 그려진 이미지 자르기

필자는 뷰포트 캔버스에 그려 넣을 수있는 이미지 변수를 만들고 그 ID를 동적으로 설정할 수있는 이유를 생각합니다. 따라서 Jquery는 동적으로 생성 된 이미지에 액세스 할 수 없습니다. 하지만 그렇다고해도 나는 무엇을해야할지 모른다.

여기 내 전체 HTML 코드입니다.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
    <head> 
     <meta http-equiv="Content-type" content="text/html;charset=UTF-8" /> 
     <title>acanimal - Crop image on the client side with JCrop and HTML5 canvas element</title> 

     <script src="./js/jquery.min.js" type="text/javascript"></script> 
     <script src="./js/jquery.Jcrop.min.js" type="text/javascript"></script> 
     <link rel="stylesheet" href="./css/jquery.Jcrop.css" type="text/css" /> 

     <script type="text/javascript"> 

      $(window).load(function() { 
       var canvas = document.getElementById('viewport'), 
       context = canvas.getContext('2d'); 

       make_base(); 

       function make_base() { 
        var base_image = new Image(); 
        base_image.id = 'target'; 
        base_image.src = 'demo_files/sago.jpg'; 
        base_image.onload = function() { 
         context.drawImage(base_image, 0, 0); 
        } 
       } 

      }); 

      jQuery(function ($) { 

       $('#target').Jcrop({ 
        onChange: updatePreview, 
        onSelect: updatePreview, 
        allowSelect: true, 
        allowMove: true, 
        allowResize: true, 
        aspectRatio: 0 
       }); 

       function updatePreview(c) { 
        if (parseInt(c.w) > 0) { 
         // Show image preview 
         var imageObj = $("#target")[0]; 
         var canvas = $("#preview")[0]; 
         var context = canvas.getContext("2d"); 

         if (imageObj != null && c.x != 0 && c.y != 0 && c.w != 0 && c.h != 0) { 
          context.drawImage(imageObj, c.x, c.y, c.w, c.h, 0, 0, canvas.width, canvas.height); 
         } 
        } 
       }; 
      }); 

     </script> 
    </head> 
    <body> 
     <canvas id="viewport" width=602; height=500;></canvas> 
     <canvas id="preview" style="width:150px;height:150px;overflow:hidden;"></canvas> 
    </body> 
</html>

내가 뭘 잘못하고 있니? 당신은 Jcrop 정확하지 설정

출처

2014-12-25 Orkun Bekar