이미지 자르기 및 Javascript를 사용하여 저장하는 간단한 구현

이 글은 주로 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를 사용하여 특정 수의 비밀번호를 무작위로 생성하는 방법

JavaScript의 %를 사용하여 선과 색상을 변경하는 방법

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