POST로 js에서 자른 이미지 저장

방금 cropit을 사용하기 시작했는데 몇 가지 문제가 있습니다.POST로 js에서 자른 이미지 저장

나는 잘린 이미지를 제출하는 가장 좋은 방법을 찾으려고 노력했는데, 이것을 찾았을 때라도 명확한 대답을 찾기가 정말 힘들다는 것을 알게되었습니다. 여기

지금까지 내 생각은 다음과 같습니다

방법 1

새로운 위치에서, 내가 JS에서 가져온, JS에서 위치를 가져가 새로운 위치를 입력하고 그것을 자르기. 2

방법은 숨겨진 양식 요소로 자른 이미지의 base64로 버전을 제출합니다. 미리보기 (이미지 자르기)가 최종 이미지보다 작기 때문에 전체 이미지를이 방법으로 가져올 수 없을지 모르겠습니다.

잘린 이미지를 얻는 가장 좋은 방법은 무엇입니까?

$(function() { $('.image-editor').cropit({ imageState: { src: 'http://lorempixel.com/500/400/' } }); });

.cropit-image-preview { background-color: #f8f8f8; background-size: cover; border: 1px solid #ccc; border-radius: 3px; margin-top: 7px; width: 275px; height: 102px; cursor: move; } .cropit-image-background { opacity: .2; cursor: auto; } .image-size-label { margin-top: 0.6rem; }

<script src="http://scottcheng.github.io/cropit/scripts/vendor.js"></script> <form> <div class="image-editor"> <label>Cover Image</label> <input type="file" class="cropit-image-input"> <div class="cropit-image-preview"></div> <div class="image-size-label"> Resize image </div> <input type="range" class="cropit-image-zoom-input"> <p class="help-block">Optimal size is 550x203.</p> </div> <input type="submit"/> </form>

cropit 라이브러리
는 여기에서 찾을 수 있습니다 : http://scottcheng.github.io/cropit/

출처

2014-09-21 Jazerix

Cropit 저자을 여기에. 너무 늦지 않았 으면 좋겠다.

숨겨진 입력에서 자른 이미지를 base64 인코딩 형식으로 제출하는 것이 좋습니다. 내 보낸 이미지 크기/품질에 대한 우려와 관련하여 cropit은 exportZoom 옵션을 제공합니다.이 옵션을 사용하면 내 보낸 이미지의 크기와 미리보기 div 사이의 비율을 지정할 수 있습니다. 자세한 내용은 the doc을 참조하십시오 (페이지의 "exportZoom"검색).

출처

2014-10-24 09:01:28 scottcheng

했다 실제로 정확히 내가 뭘했는지, 완벽하게 작동합니다 ^^ 슈퍼 멋진 스크립트 btw! – Jazerix

기쁘다. – scottcheng

자른 이미지 데이터를 다른 필드 (숨김 또는 다른 방법)에 넣는 방법은 무엇입니까? – Snappawapa

이 또한 찾고있었습니다. 숨겨진 입력을 통해 이미지 값을 전달 생각하지만 이미지를 저장에 붙어있어, 그래서 관심 모두를 위해, 이것은 내가 사용하여 종료 코드입니다 :

$saveImage = 'NAMEOFTHEIMAGEFILE.png'; 
$data = $_POST['DATAURI']; 
list($t, $data) = explode(';', $data); 
list($t, $data) = explode(',', $data); 
$src = base64_decode($data); 
file_put_contents('/'.$saveImage, $src);

출처

2015-02-24 12:41:10

$(function() { 
 
    $('.image-editor').cropit({ 
 
    imageState: { 
 
     src: 'http://lorempixel.com/500/400/' 
 
    } 
 
    }); 
 
});

.cropit-image-preview { 
 
    background-color: #f8f8f8; 
 
    background-size: cover; 
 
    border: 1px solid #ccc; 
 
    border-radius: 3px; 
 
    margin-top: 7px; 
 
    width: 275px; 
 
    height: 102px; 
 
    cursor: move; 
 
} 
 

 
.cropit-image-background { 
 
    opacity: .2; 
 
    cursor: auto; 
 
} 
 

 
.image-size-label { 
 
    margin-top: 0.6rem; 
 
}

<script src="http://scottcheng.github.io/cropit/scripts/vendor.js"></script> 
 
<form> 
 
<div class="image-editor"> 
 
    <label>Cover Image</label> 
 
    <input type="file" class="cropit-image-input"> 
 
    <div class="cropit-image-preview"></div> 
 
    <div class="image-size-label"> 
 
    Resize image 
 
    </div> 
 
    <input type="range" class="cropit-image-zoom-input"> 
 
    <p class="help-block">Optimal size is 550x203.</p> 
 
</div> 
 
    <input type="submit"/> 
 
</form>

출처

2015-08-06 12:15:05

POST로 js에서 자른 이미지 저장

답변

관련 문제