Javascript를 사용하여 이미지를 자르고 저장하는 간단한 샘플 코드

사진 자르기는 우리에게 매우 친숙한 일입니다. 최근 직장에서 이런 필요성을 다시 접했기 때문에, 필요할 때 누구나 참고할 수 있으므로 이 글에서는 간단히 정리해 보겠습니다. Javascript를 사용하여 이미지를 자르고 저장하는 간단한 구현을 위해 백엔드 PHP 처리에 THINKPHP 프레임워크를 사용합니다.

서문

제가 아는 한 페이지에서 슬라이딩 등 디자인이 좀 더 유연한 부분은 많지 않습니다. 인증 코드 및 이미지 자르기가 더 나은 상호 작용 디자인을 기다리고 있습니다.

처음 일을 시작했을 때 이런 것들을 이해하고 싶었지만 그럴 필요가 없었습니다. 오늘의 자유 시간을 활용하여 오후 내내 공부하는 동안 모든 규모의 문제에 직면했습니다. 고문을 당한다는 것은 사실 내

가 상대적으로 약하다는 것을 반영합니다.

효과 달성:

사용자가 이미지 업로드를 클릭하면 페이지에 업로드된 이미지와 자르기 상자 및 두 개가 표시됩니다. 미리보기 영역이 나타납니다. 마지막으로 자르기 버튼을 클릭하여 자른 이미지를 서버에 저장합니다.

효과는 매우 간단합니다. 전체 과정에서 두 가지 어려움을 겪었습니다. 첫 번째는 자르기 JS 효과이고 두 번째는 이미지 데이터 처리입니다.

첫 번째 질문은 인터넷에서 제공하는 플러그인을 인용한 것입니다. 제가 느끼기에 자르기 과정에 대한 사용자 만족도는 평균 수준이라고 생각됩니다. 사각형 영역 자르기. 테두리에 8개의 당기기 설정이 있음에도 불구하고 프레임을 당길 때 프레임의 크기가 여전히 사각형에 따라 조정되므로 그다지 만족스럽지 않습니다.

구현 방법은 다음과 같습니다.

다음은 간단한 페이지 디자인입니다.

<p style="float:left;"><img id="target"></p>
<p style="width:48px;height:48px;margin:10px;overflow:hidden; float:left;"><img style="float:left;" id="preview" ></p>
<p style="width:190px;height:195px;margin:10px;overflow:hidden; float:left;"><img style="float:left;" id="preview2" ></p>
<form action="{:U(&#39;/test/crop_deal&#39;)}" method="post" onsubmit="return checkCoords()" enctype="multipart/form-data" id="form">
<input type="file" name="file" onchange="change_image(this)">
<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" />
<input type="submit" value="裁剪"/>
</form>

다음은 JS 코드입니다.

function change_image(file){
var reader = new FileReader();
reader.onload = function(evt){
$("#target").attr('src',evt.target.result);
$('#preview').attr('src',evt.target.result);
$('#preview2').attr('src',evt.target.result);
// $('#target').css({"height":"600px","width":"600px"});
// 限制了大小会影响到截图的效果
};
reader.readAsDataURL(file.files[0]);

var jcrop_api, boundx, boundy;

setTimeout(function(){


$('#target').Jcrop({
minSize: [48,48],
setSelect: [0,0,190,190],
onChange: updatePreview,
onSelect: updatePreview,
onSelect: updateCoords,
aspectRatio: 1
},
function(){
// Use the API to get the real image size
var bounds = this.getBounds();
boundx = bounds[0];
boundy = bounds[1];
// Store the API in the jcrop_api variable
jcrop_api = this;
});

function updatePreview(c){
if (parseInt(c.w) > 0)
{
var rx = 48 / c.w; //小头像预览p的大小
var ry = 48 / c.h;

$('#preview').css({
width: Math.round(rx * boundx) + 'px',
height: Math.round(ry * boundy) + 'px',
marginLeft: '-' + Math.round(rx * c.x) + 'px',
marginTop: '-' + Math.round(ry * c.y) + 'px'
});
}
{
var rx = 199 / c.w; //大头像预览p的大小
var ry = 199 / c.h;
$('#preview2').css({
width: Math.round(rx * boundx) + 'px',
height: Math.round(ry * boundy) + 'px',
marginLeft: '-' + Math.round(rx * c.x) + 'px',
marginTop: '-' + Math.round(ry * c.y) + 'px'
});
}
};


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

},500);

}

다음은 두 가지 알림입니다.

하나: 하지 마세요. 플러그인 소개:

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

둘째: 눈썰미가 좋은 분들은 JS에서 타이밍을 보고 동시에 헷갈리시는 분들도 계실 텐데요. 좀 불필요한? 실제로는 이미지를 JS에 업로드하고 페이지에 로드하는 데 시간이 걸립니다. 이 타이밍의 의미는 자르기 효과를 로드하기 전에 JS에 의해 이미지가 페이지에 로드될 때까지 기다리는 것입니다. 이 역시 반복된 실험을 통해 얻은 것입니다. 관행.

백엔드 PHP 처리를 위해 THINKPHP 프레임워크를 사용합니다. 버전은 3.1.3

코드를 붙여넣습니다.

function crop_deal(){
　　ob_clean();
　　import ( 'ORG.Net.UploadFile' );
　　$upload = new UploadFile ();
　　$upload->maxSize = 2000000;
　　$upload->allowExts = array (
　　　　'jpg',
　　　　'gif',
　　　　'png',
　　　　'jpeg'
　　);
　　$upload->savePath = './upload/test/';
　　$upload->autoSub = true;
　　$upload->subType = 'date';
　　$upload->dateFormat = 'Ymd';
　　if ($upload->upload () ) {
　　　　$info = $upload->getUploadFileInfo();
　　　　$new_path = "./upload/test/thumb".date('Ymd');
　　　　$file_store = $new_path."/".date('YmdHis').".jpg";
　　　　if(!file_exists($new_path)){
　　　　　　mkdir($new_path,0777,true);
　　　　}
　　　　$source_path = "http://".$_SERVER['HTTP_HOST']."/upload/test/".$info[0]['savename'];
　　　　$img_size = getimagesize($source_path);
　　　　$width = $img_size[0];
　　　　$height = $img_size[1];　　
　　　　$mime = $img_size['mime'];
　　　　$srcImg = imagecreatefromstring(file_get_contents($source_path));
　　　　$cropped_img = imagecreatetruecolor($_POST['w'], $_POST['h']);
　　　　//缩放
　　　　// imagecopyresampled($cropped_img,$srcImg,0,0,$_POST['x'],$_POST['y'],$_POST['w'],$_POST['h'],$width,$height);
　　　　//裁剪
　　　　imagecopy($cropped_img,$srcImg,0,0,$_POST['x'],$_POST['y'],$_POST['w'],$_POST['h']);
　　　　header("Content-Type:image/jpeg");
　　　　imagejpeg($cropped_img,$file_store);
　　　　imagedestroy($srcImg);
　　　　imagedestroy($cropped_img);
　　}

}

여기는 GD 라이브러리 호출 이미지를 생성하는 방법에는 여러 가지가 있는데, 가장 중요한 방법은 지정된 자르기 위치와 자르기 크기에 따라 원본 이미지를 새 이미지로 복사하는

입니다. 페이지 사용자가 이미지를 자르고 있습니다

imagecopy() 사실 프론트 엔드는 이미지에 대해 작업을 수행하지 않지만, 자를 때 좌표 위치, 자르기 크기를 얻은 다음 작업을 위해 PHP에 제출합니다! !

요약

위 내용은 Javascript를 사용하여 이미지를 자르고 저장하는 간단한 샘플 코드의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!