Jcrop을 사용하여 업로드 된 이미지 자르기

Question

Jcrop을 사용하여 업로드 된 이미지를 잘라내려고합니다. 내 의도는 사용자가 업로드 할 때 이미지를 잘라내는 것입니다. 사용자가 업로드 한 이미지를 서버에 저장할 필요가 없습니다. 하지만, 나는 이미지 사용자의 일부만을 Jcrop을 통해 서버에 저장해야한다.

HTML :

<form id="form1"> 
    <input type='file' id="imgInp" /> 
    <img id="blah" class="crop" src="#" alt="your image" /> 
    <input type="hidden" id="x" name="x" /> 
     <input type="hidden" id="y" name="y" /> 
     <input type="hidden" id="w" name="w" /> 
     <input type="hidden" id="h" name="h" /> 
</form> 

CSS :

<style> 
#blah { 
    background-color: #FFF; 
    width: 500px; 
    height: 330px; 
    font-size: 24px; 
    display: block; 
    } 
</style> 

JS :

function readURL(input) { 
     if (input.files && input.files[0]) { 
      var reader = new FileReader(); 

      reader.onload = function (e) { 
       $('#blah').attr('src', e.target.result); 
      } 

      reader.readAsDataURL(input.files[0]); 
     } 
    } 

    $("#imgInp").change(function(){ 
     console.log(this); 
     readURL(this); 
     $(function(){ 

    $('.crop').Jcrop({ 

     onSelect: updateCoords, 

      bgOpacity: .4, 
      setSelect: [ 100, 100, 50, 50 ], 
      aspectRatio: 16/9 
    }); 

    }); 
    }); 

    function updateCoords(c) 
    { 
    console.log(c); 
    $('#x').val(c.x); 
    $('#y').val(c.y); 
    $('#w').val(c.w); 
    $('#h').val(c.h); 
    }; 

여기에 내가 다음 코드를 사용했다

문제에 대한 fiddle 링크입니다 내가 해봤 어. ike, 이미지를 업로드 한 후에 JCrop에 동일한 이미지가 사용되므로 나머지 이미지를 생성하기 위해 좌표 값을 얻을 수 있습니다. 내 문제는 지금이 : 업로드 할 때 업로드 된 이미지보다는 이미지 지점에 검은 색이 나타납니다. 누구든지 코드를 살펴보고 코드의 문제점을 찾아 낼 수 있습니까?

Answer 1

실제로로드되기 전에 이미지에서 jCrop을 호출하고 있기 때문에 이미지가 검은 색으로 표시되는 문제가 발생합니다. reader.onload 호출 후에 jCrop을 호출하여 이미지가로드 된 후에 실행되도록 할 수 있습니다. 이 참조 :

여기

reader.onload = function (e) { 
    $('#blah').attr('src', e.target.result); 
    $('.crop').Jcrop({  
     onSelect: updateCoords, 
     bgOpacity: .4, 
     setSelect: [ 100, 100, 50, 50 ], 
     aspectRatio: 16/9 
     }); 
} 

이있는 나는 Jcrop 오랫동안 업데이트 has't 것으로 보인다는 단점은 그렇지 않은 것입니다 IE 11을 지원하지 않습니다 fiddle

Answer 2

업데이트 이미지 자체 자르기. 그것은 단지 좌표를 제공하고 원본 이미지로 웹 서버에 업로드 한 다음 서버에서 자릅니다.

답변은 here입니다. Jcrop & 업로드 플러그인을 사용하여 브라우저에서 자르고, 크기를 조정하고, 크기를 조정하고, 자른 이미지를 서버에 업로드 할 수있는 옵션이 제공됩니다. 이 플러그인은 HTML 5 Canvas 요소를 사용하여 이미지를 잘라내어 IE 11을 지원합니다.