모바일초대장 해상도 관련
본문
모바일초대장 제작 후 이미지해상도가 많이 떨어지는데
아래 어떤 부분을 수정해야 하나요?
<!--#include virtual="/_common/cacheControl.asp" -->
<!--#include virtual="/_common/function.asp" -->
<!--#include virtual="/_common/config.asp" -->
<!--#include file="../_common/vars.asp" -->
<!--#include virtual="/_common/md5.asp" -->
<!--#include virtual="/_ki_file/nfupload_conf.inc.asp" -->
<%
Dim SkinCode, CardNo, mode
Dim MainPhotoW, MainPhotoH
Dim bgImage, MainPhotoWidth, MainPhotoHeight, MainPhotoLeft, MainPhotoTop, MainPhotoRotate
Dim priviewImageSrc, priviewImageUploaded
Dim MaxFileSize
On Error Resume Next
Set UpLdCmpntReqFrm = Server.CreateObject("DEXT.FileUpload")
UpLdCmpntReqFrm.DefaultPath = NFUpload_dir_temp
UpLdCmpntReqFrm.UploadTimeout = 3600 '** 단위 sec
If UpLdCmpntReqFrm("buf_file[]") = "" Then
SkinCode = Trim(Request.QueryString("SkinCode"))
CardNo = Trim(Request.QueryString("CardNo"))
priviewImageSrc = "/mc/img/nophoto.gif"
MainPhotoW = "320"
priviewImageUploaded = False
Else
MaxFileSize = 1024 * 1024 * 10 '** 업로드 용량 제한.
SkinCode = stripQuotationMarks(UpLdCmpntReqFrm("SkinCode"))
CardNo = stripQuotationMarks(UpLdCmpntReqFrm("CardNo"))
save_dir = NFUpload_dir &"\mcpreview\"& SkinCode &"\" '** 파일이 저장될 경로
Call fnKi_createFoder(save_dir) '** 폴더 생성.
buf_file_origin = UpLdCmpntReqFrm("buf_file[]").FileName
buf_file_onlynm = md5(UpLdCmpntReqFrm("buf_file[]").FileNameWithoutExt) '** 파일의 순수한 이름만.
buf_file_ext = UpLdCmpntReqFrm("buf_file[]").FileExtension '** 파일의 확장자만.
buf_file_name = md5(buf_file_onlynm) &"."& buf_file_ext
buf_file_name = fnKi_GetUniqueName(buf_file_name, save_dir)
buf_file_size = UpLdCmpntReqFrm("buf_file[]").FileLen
buf_file_type = UpLdCmpntReqFrm("buf_file[]").ImageFormat
If buf_file_size > MaxFileSize And MaxFileSize <> -1 Then '** 파일의 용량을 관리자 설정값으로 제한
Response.Write "<script type=text/javascript>"
Response.Write " alert('"& fnKi_fileSizeString(MaxFileSize) &" 이하의 파일만 등록이 가능합니다.');"
Response.Write " this.close();"
Response.Write "</script>"
Response.End
Else
If buf_file_size<=0 Then
Response.Write "<script type=text/javascript>"
Response.Write " alert('파일을 확인해주세요');"
Response.Write " this.close();"
Response.Write "</script>"
Response.End
End If
If chkNull(buf_file_type) Then
Response.Write "<script type=text/javascript>"
Response.Write " alert('이미지 파일만 등록할수 있습니다.');"
Response.Write " this.close();"
Response.Write "</script>"
Response.End
End If
If LCase(buf_file_ext) <> "jpg" Then
Response.Write "<script type=text/javascript>"
Response.Write " alert('JPG 파일만 등록할수 있습니다.');"
Response.Write " this.close();"
Response.Write "</script>"
Response.End
End If
buf_file_width = UpLdCmpntReqFrm("buf_file[]").ImageWidth
buf_file_height = UpLdCmpntReqFrm("buf_file[]").ImageHeight
'If buf_file_width < 400 Then
'finishAcn = "alert('이미지 파일 가로 사이즈가 400픽셀 이상만 등록이 가능합니다.');"
'Else
UpLdCmpntReqFrm("buf_file[]").SaveAS save_dir & buf_file_name , True '** 파일저장
buf_file_name = UpLdCmpntReqFrm("buf_file[]").LastSavedFileName '** 저장된 파일명 가져오기
'End If
If buf_file_width > 640 Then
fixWidth = 640
fixHeight = 873
if buf_file_width > fixWidth or buf_file_height > fixHeight then
if buf_file_width > buf_file_height then
resizeWidth = fixWidth
resizeHeight = buf_file_height * fixWidth / buf_file_width
if resizeHeight > fixHeight then
resizeWidth = fixHeight * buf_file_width / buf_file_height
resizeHeight = fixHeight
end if
else
resizeHeight = fixHeight
resizeWidth = buf_file_width * fixHeight / buf_file_height
if resizeWidth > fixWidth then
resizeWidth = fixWidth
resizeHeight = fixWidth * buf_file_height / buf_file_width
end if
end if
else
resizeWidth = buf_file_width
resizeHeight = buf_file_height
end If
Set objImage = Server.CreateObject("DEXT.ImageProc")
If objImage.SetSourceFile(save_dir & buf_file_name) Then
thumb_fileName = objImage.SaveasThumbnail(save_dir & buf_file_name , resizeWidth, resizeHeight, false)
buf_file_name = Mid(thumb_fileName, InstrRev(thumb_fileName, "\") + 1 )
End If
End If
priviewImageSrc = "/_data/mcpreview/"& SkinCode &"/"& buf_file_name
priviewImageUploaded = True
End If
End If
Set UpLdCmpntReqFrm = Nothing
Query = "Exec dbo.sp_MCardSkinView @SkinCode='"& SkinCode &"'"
Set rs = dbcon.Execute(Query)
If Not rs.EOF Then
bgImage = "http://" & site_url_php & "/data/" & Trim(rs("MainFG"))
MainPhotoWidth = rs("MainPhotoWidth")
MainPhotoHeight = rs("MainPhotoHeight")
MainPhotoLeft = rs("MainPhotoLeft") / 2
MainPhotoTop = rs("MainPhotoTop") / 2
MainPhotoRotate = rs("MainPhotoRotate")
MainPhotoW = MainPhotoWidth / 2
MainPhotoH = MainPhotoHeight / 2
End If
rs.Close
Set rs = Nothing
%>
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no"/>
<meta content="IE=edge" http-equiv="X-UA-Compatible">
<meta http-equiv="content-type" content="text/html; charset=euc-kr"/>
<title>인해피 메인화면 설정</title>
<link rel="icon" href="/img_new/inhappy.ico" type="image/x-icon">
<link rel="stylesheet" href="<%= SITEDIR %>/_css/style.css?140923" type="text/css">
<script language=javascript src="<%= SITEDIR %>/_js/common.js"></script>
<script language=javascript src="/_js/jquery-1.8.3.min.js"></script>
<script language=javascript src="/_js/jquery-filestyle.js"></script>
<link href="/mc/css/cropper.css" rel="stylesheet">
<link href="/mc/css/docs.css" rel="stylesheet">
<style>
html {overflow:hidden;}
body {margin:0;padding:0;}
#title_img {padding:0;height:56px;}
#container {width:910px;margin:0;padding:0;background-color:#eeefef;}
#container:after {content:""; display:block; clear:both}
#cwest {width:397px;float:left;background-color:#eeefef;}
#cwest .btns {margin:0;padding:0;text-align:center;margin-top:10px;}
#ceast {width:513px;float:left;background-color:#231815;}
.pframe {position:relative;width:349px;height:465px;margin:24px auto 0;z-index:99;overflow:hidden;}
.pframe .outframe {position:absolute;top:0;left:0;z-index:9999;}
.pframe .centerframe {position:absolute;top:0;left:0;padding:15px;z-index:999;}
.pframe .previewframe {position:absolute;top:<%=(MainPhotoTop + 15)%>px;left:<%=(MainPhotoLeft + 15)%>px;z-index:99;}
.fileform {width:320px;margin:12px auto 0;padding:0;}
.fileform:after {display:block;visibility:hidden;clear:both;content:""}
.fileform li {float:left}
.fileform .inf {width:195px;height:24px;line-height:24px;border:1px solid #9fa0a0;}
.fileform .submit {padding-left:4px;}
.desc {position:relative;width:320px;margin:10px auto 0;z-index: 99;}
.preview-lg {width:<%=MainPhotoW%>px;height:<%=MainPhotoH%>px}
</style>
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div id="title_img"><img src="./img.form/ptw_01_2.gif" border=0 /></div>
<div id="container">
<div id="cwest">
<div class="pframe">
<div class="outframe"><img src="./img.form/ptw_angle_320.png" border=0></div>
<div class="centerframe"><img src="<%=bgImage%>" width="320"></div>
<div class="previewframe"><div class="preview preview-lg"></div></div>
</div>
<form method="post" name="frmPhoto1" action="detail_mcard_photo_win.asp" enctype="multipart/form-data" style="margin:0;">
<input type="hidden" name="SkinCode" value="<%=SkinCode%>">
<input type="hidden" name="CardNo" value="<%=CardNo%>">
<input type="hidden" name="uploadGubun" value="mobi_photo">
<input type="hidden" name="cp_gubun" value="main">
<input type="hidden" name="new_file" value="">
<input type="hidden" name="po_x" id="po_x" />
<input type="hidden" name="po_y" id="po_y" />
<input type="hidden" name="po_w" id="po_w" />
<input type="hidden" name="po_h" id="po_h" />
<input type="hidden" name="po_r" id="po_r" />
<input type="hidden" name="MainPhotoWidth" id="MainPhotoWidth" value="<%=MainPhotoWidth%>" />
<input type="hidden" name="MainPhotoHeight" id="MainPhotoHeight" value="<%=MainPhotoHeight%>" />
<input type="hidden" name="iurl" id="iurl" value="http://inhappy.kr<%=priviewImageSrc%>" />
<ul class="fileform">
<li><div style="text-align:right;"><input type="file" name="buf_file[]" class="inf"></div></li>
</ul>
</form>
<div class="btns">
<img src="./img.form/ptw_btn_01_2.gif" border=0 style="cursor:pointer" id="rotateRight">
<img src="./img.form/ptw_btn_02_2.gif" border=0 style="cursor:pointer" id="reset">
<img src="./img.form/ptw_btn_03_2.gif" border=0 style="cursor:pointer" onclick="fileSave();">
<img src="./img.form/ptw_btn_04_2.gif" border=0 style="cursor:pointer" id="cancel">
</div>
<div class="desc">
<img src="./img.form/ptw_desc.gif">
</div>
</div>
<div id="ceast">
<div class="eg-wrapper">
<img class="cropper" src="<%=priviewImageSrc%>" alt="Picture">
</div>
</div>
</div>
<div id="test"></div>
<script type="text/javascript">
<!--
$(function(){
$("input[type=file]").filestyle({
image: "./img.form/ptw_btn_05_2.gif",
imageheight : 28,
imagewidth : 118,
width : 200
});
});
function fileSave() {
<%If priviewImageUploaded = false Then%>
alert("사진불러오기 버튼을 클릭해서 사진을 첨부해주세요.");
return;
<%Else%>
var f = document.forms.frmPhoto1;
f.po_x.value = $("#dataX").val();
f.po_y.value = $("#dataY").val();
f.po_w.value = $("#dataWidth").val();
f.po_h.value = $("#dataHeight").val();
f.po_r.value = $("#dataRotate").val();
f.action = "http://<%=site_url_php%>/wzMainUploadOk.php";
f.submit();
<%End If%>
}
function win_file_upload() {
var frm = document.forms.frmPhoto1;
frm.submit();
}
//-->
</script>
<input class="form-control" id="dataX" type="hidden" placeholder="x">
<input class="form-control" id="dataY" type="hidden" placeholder="y">
<input class="form-control" id="dataWidth" type="hidden" placeholder="width">
<input class="form-control" id="dataHeight" type="hidden" placeholder="height">
<input class="form-control" id="dataRotate" type="hidden" placeholder="rotate">
<script src="/mc/js/cropper.js"></script>
<script type="text/javascript">
<!--
$(function() {
$("#cancel").click(function() {
self.close();
});
var $image = $(".cropper"),
$dataX = $("#dataX"),
$dataY = $("#dataY"),
$dataHeight = $("#dataHeight"),
$dataWidth = $("#dataWidth"),
console = window.console || {log:$.noop},
cropper;
$image.cropper({
aspectRatio: <%=MainPhotoW%> / <%=MainPhotoH%>,
autoCropArea: 1,
/*
data: {
x: 0,
y: 0,
width: "auto",
height: "auto"
},
*/
dragCrop:false,
preview: ".preview",
// multiple: true,
// autoCrop: false,
// dragCrop: false,
// dashed: false,
// modal: false,
// movable: false,
// resizable: false,
// zoomable: false,
// rotatable: false,
// checkImageOrigin: false,
// maxWidth: 480,
// maxHeight: 270,
// minWidth: 160,
// minHeight: 90,
done: function(data) {
$dataX.val(data.x);
$dataY.val(data.y);
$dataHeight.val(data.height);
$dataWidth.val(data.width);
},
build: function(e) {
console.log(e.type);
},
built: function(e) {
console.log(e.type);
},
dragstart: function(e) {
console.log(e.type);
},
dragmove: function(e) {
console.log(e.type);
},
dragend: function(e) {
console.log(e.type);
}
});
cropper = $image.data("cropper");
$image.on({
"build.cropper": function(e) {
console.log(e.type);
// e.preventDefault();
},
"built.cropper": function(e) {
console.log(e.type);
// e.preventDefault();
},
"dragstart.cropper": function(e) {
console.log(e.type);
// e.preventDefault();
},
"dragmove.cropper": function(e) {
console.log(e.type);
// e.preventDefault();
},
"dragend.cropper": function(e) {
console.log(e.type);
// e.preventDefault();
}
});
$("#reset").click(function() {
$image.cropper("reset");
var rot = parseInt($("#dataRotate").val());
if (rot) {
$image.cropper("rotate", rot - 360);
$("#dataRotate").val(0);
}
});
$("#reset2").click(function() {
$image.cropper("reset", true);
});
$("#clear").click(function() {
$image.cropper("clear");
});
$("#destroy").click(function() {
$image.cropper("destroy");
});
$("#enable").click(function() {
$image.cropper("enable");
});
$("#disable").click(function() {
$image.cropper("disable");
});
$("#zoom").click(function() {
$image.cropper("zoom", $("#zoomWith").val());
});
$("#zoomIn").click(function() {
$image.cropper("zoom", 0.1);
});
$("#zoomOut").click(function() {
$image.cropper("zoom", -0.1);
});
$("#rotate").click(function() {
$image.cropper("rotate", $("#rotateWith").val());
});
$("#rotateLeft").click(function() {
$image.cropper("rotate", -90);
});
$("#rotateRight").click(function() {
$image.cropper("rotate", 90);
var intRotate = $("#dataRotate").val();
intRotate = parseInt(intRotate ? intRotate : 0);
if (!intRotate)
intRotate = 360;
intRotate = intRotate - 90;
$("#dataRotate").val(intRotate);
});
var $inputImage = $("#inputImage");
if (window.FileReader) {
$inputImage.change(function() {
var fileReader = new FileReader(),
files = this.files,
file;
if (!files.length) {
return;
}
file = files[0];
if (/^image\/\w+$/.test(file.type)) {
fileReader.readAsDataURL(file);
fileReader.onload = function () {
$image.cropper("reset", true).cropper("replace", this.result);
$inputImage.val("");
};
} else {
showMessage("Please choose an image file.");
}
});
} else {
$inputImage.addClass("hide");
}
$("#setAspectRatio").click(function() {
$image.cropper("setAspectRatio", $("#aspectRatio").val());
});
$("#replace").click(function() {
$image.cropper("replace", $("#replaceWith").val());
});
$("#getImageData").click(function() {
$("#showImageData").val(JSON.stringify($image.cropper("getImageData")));
});
$("#setData").click(function() {
$image.cropper("setData", {
x: $dataX.val(),
y: $dataY.val(),
width: $dataWidth.val(),
height: $dataHeight.val()
});
});
$("#getData").click(function() {
$("#showData").val(JSON.stringify($image.cropper("getData")));
});
$("#getData2").click(function() {
$("#showData").val(JSON.stringify($image.cropper("getData", true)));
});
$("#getDataURL").click(function() {
var dataURL = $image.cropper("getDataURL");
$("#dataURL").text(dataURL);
$("#showDataURL").html('<img src="' + dataURL + '">');
});
$("#getDataURL2").click(function() {
var dataURL = $image.cropper("getDataURL", "image/jpeg");
$("#dataURL").text(dataURL);
$("#showDataURL").html('<img src="' + dataURL + '">');
});
$("#getDataURL3").click(function() {
var dataURL = $image.cropper("getDataURL", {
width: 160,
height: 90
});
$("#dataURL").text(dataURL);
$("#showDataURL").html('<img src="' + dataURL + '">');
});
});
//-->
</script>
</body>
</html>
답변 1
크게 만드세요
뷰포트를 어떻게 설정하실지 부터 정하시고,
각 기기별 넓이에 100% 맞출려면 <img src="#" style="width:100%;" />
이렇게 적용 되기 때문에
원래 작업하신 이미지의 사이즈 보다 모바일 기기의 해상도가 작다면 문제가 없는데
크다면 그만큼 이미지를 크게 늘리기 때문에 이미지가 깨집니다.
그래서 더 크게 제작을 하구요
모바일 사이트 설정은 폭을 640으로 만들어진 상태입니다
현재 문제가 되는 페이지가 메인페이지에 사진을 등록하면 프로그램적으로 이미지 사이즈를
축소해서 등록 되도록 설정되어 있는 상태인데 해상도 설정 값을 많이 낮춘 상태로 등록 되다보니
위에서 보여지는 이미지 처럼 원본 파일을 등록했을때 옆의 모바일초대장 등록 후 이미지로
해상도가 많이 떨어진 상태로 등록 된것 입니다
