자 바스 크 립 트 를 이용 하여 그림 을 재단 하고 저장 하 는 간단 한 실현
저 에 게 있어 페이지 의 디자인 이 비교적 생동감 있 는 부분 은 사실 많 지 않 습 니 다.예 를 들 어 미끄럼 인증 코드,이미지 재단 등 비교적 좋 은 상호작용 디자인 입 니 다.
처음에 일 을 시 작 했 을 때 저 는 이런 것들 을 알 고 싶 었 습 니 다.어 쩔 수 없 이 이런 수요 가 없 었 습 니 다.오늘 의 여가 시간 을 틈 타 오후 내 내 연 구 를 했 습 니 다.그 동안 크 고 작은 문제 에 부 딪 혀 고통 을 받 았 습 니 다.이것 은 사실은 한 가지 문 제 를 반 영 했 습 니 다.제 것 입 니 다.
역시 약 하 다.
구현 효과:
사용자 가 사진 을 업로드 하려 면 페이지 에 올 린 그림 을 표시 하고 재단 상자 와 두 개의 미리 보기 영역 이 나타 나 며 마지막 으로 재단 단 추 를 누 르 면 재단 한 그림 을 서버 에 저장 합 니 다.
효 과 는 매우 간단 하 다.전체 과정 에서 내 가 만난 두 가지 난점 은 첫 번 째 는 재단 한 JS 효과 이 고 두 번 째 는 이미지 데이터 의 처리 이다.
첫 번 째 문제 에 대해 저 는 인터넷 의 플러그 인 을 인 용 했 습 니 다.재단 과정 에서 사용자 의 만족 도 는 보통 이 라 고 생각 합 니 다.정사각형 구역 만 재단 할 수 있 기 때문에 테두리 에 8 개의 당 김 설정 이 있어 도 상 자 를 당 길 때 정사각형 으로 크기 를 조정 하 는 것 이 만 족 스 럽 지 않 습 니 다.
실현 방법 은 다음 과 같다.
다음은 간단 한 페이지 디자인 입 니 다.
<div style="float:left;"><img id="target"></div>
<div style="width:48px;height:48px;margin:10px;overflow:hidden; float:left;"><img style="float:left;" id="preview" ></div>
<div style="width:190px;height:195px;margin:10px;overflow:hidden; float:left;"><img style="float:left;" id="preview2" ></div>
<form action="{:U('/test/crop_deal')}" 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; // Div
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; // Div
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 작업 에 제출 합 니 다!!
총결산
이상 은 이 글 의 전체 내용 입 니 다.본 논문 의 내용 이 여러분 의 학습 이나 Swift 사용 에 어느 정도 도움 이 되 기 를 바 랍 니 다.궁금 한 점 이 있 으 시 면 댓 글 을 남 겨 주 셔 서 저희 에 대한 지지 에 감 사 드 립 니 다.
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
Thymeleaf 의 일반 양식 제출 과 AJAX 제출텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.