모바일초대장 해상도 관련 채택완료

모바일초대장 제작 후 이미지해상도가 많이 떨어지는데

아래 어떤 부분을 수정해야 하나요?

<!--#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%">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>
​