Jcrop有大尺寸图像

TRANSLATED

我运行，以实现在PHP和jQuery上传表单，并说，现在一切细微差别，除了一点，我认为是无稽之谈的问题，但仍不能想办法。让我解释一下：在练习当我运行图片上传时，我马上打印到屏幕上是一个临时预览，我会去那里剪切到我喜欢的图片，然后保存缩略图。然而，这个预览，如果我插入jpg高分辨率，我会看到真人大小，对于页面来说太大了。代码如下：

的index.php

<?php 
function uploadImageFile() { // Note: GD library is required for this function 
if ($_SERVER['REQUEST_METHOD'] == 'POST') { 
    $iWidth = $iHeight = 100; // desired image result dimensions 
    $iJpgQuality = 90; 

    if ($_FILES) { 

     // if no errors and size less than 250kb 
     if (! $_FILES['image_file']['error'] && $_FILES['image_file']['size'] < 55555250 * 1024) { 
      if (is_uploaded_file($_FILES['image_file']['tmp_name'])) { 

       // new unique filename 
       $sTempFileName = 'cache/' . md5(time().rand()); 

       // move uploaded file into cache folder 
       move_uploaded_file($_FILES['image_file']['tmp_name'], $sTempFileName); 

       // change file permission to 644 
       @chmod($sTempFileName, 0644); 

       if (file_exists($sTempFileName) && filesize($sTempFileName) > 0) { 
        $aSize = getimagesize($sTempFileName); // try to obtain image info 
        if (!$aSize) { 
         @unlink($sTempFileName); 
         return; 
        } 

        // check for image type 
        switch($aSize[2]) { 
         case IMAGETYPE_JPEG: 
          $sExt = '.jpg'; 

          // create a new image from file 
          $vImg = @imagecreatefromjpeg($sTempFileName); 
          break; 
         /*case IMAGETYPE_GIF: 
          $sExt = '.gif'; 

          // create a new image from file 
          $vImg = @imagecreatefromgif($sTempFileName); 
          break;*/ 
         case IMAGETYPE_PNG: 
          $sExt = '.png'; 

          // create a new image from file 
          $vImg = @imagecreatefrompng($sTempFileName); 
          break; 
         default: 
          @unlink($sTempFileName); 
          return; 
        } 

        // create a new true color image 
        $vDstImg = @imagecreatetruecolor($iWidth, $iHeight); 

        // copy and resize part of an image with resampling 
        imagecopyresampled($vDstImg, $vImg, 0, 0, (int)$_POST['x1'], (int)$_POST['y1'], $iWidth, $iHeight, (int)$_POST['w'], (int)$_POST['h']); 

        // define a result image filename 
        $sResultFileName = $sTempFileName . $sExt; 

        // output image to file 
        imagejpeg($vDstImg, $sResultFileName, $iJpgQuality); 
        @unlink($sTempFileName); 

        return $sResultFileName; 

       } 
      } 
     } 
    } 
} 
} 

$sImage = uploadImageFile(); 
echo '<div align=center><img src="'.$sImage.'" /></div>'; 
echo $sImage; 
?> 
    <!-- add styles --> 
    <link href="css/main.css" rel="stylesheet" type="text/css" /> 
    <link href="css/jquery.Jcrop.min.css" rel="stylesheet" type="text/css" /> 

    <!-- add scripts --> 
    <script src="js/jquery.min.js"></script> 
    <script src="js/jquery.Jcrop.min.js"></script> 
    <script src="js/script.js"></script> 
</head> 
<body> 

    <div class="demo"> 
     <div class="bbody"> 

      <!-- upload form --> 
      <form id="upload_form" enctype="multipart/form-data" method="post" onsubmit="return checkForm()"> 
       <!-- hidden crop params --> 
       <input type="hidden" id="x1" name="x1" /> 
       <input type="hidden" id="y1" name="y1" /> 
       <input type="hidden" id="x2" name="x2" /> 
       <input type="hidden" id="y2" name="y2" /> 

       <h2>Step1: Please select image file</h2> 
       <div><input type="file" name="image_file" id="image_file" onchange="fileSelectHandler()" /></div> 

       <div class="error"></div> 

       <div class="step2"> 
        <h2>Step2: Please select a crop region</h2> 
        <img id="preview"/> <!-- QUESTA È LA PREVIEW --> 

        <div class="info"> 
         <label>File size</label> <input type="text" id="filesize" name="filesize" /> 
         <label>Type</label> <input type="text" id="filetype" name="filetype" /> 
         <label>Image dimension</label> <input type="text" id="filedim" name="filedim" /> 
         <label>W</label> <input type="text" id="w" name="w" /> 
         <label>H</label> <input type="text" id="h" name="h" /> 
        </div> 

        <input type="submit" value="Upload" /> 
       </div> 
      </form> 
     </div> 
    </div> 
</body> 
</html>

的script.js

function bytesToSize(bytes) { 
var sizes = ['Bytes', 'KB', 'MB']; 
if (bytes == 0) return 'n/a'; 
var i = parseInt(Math.floor(Math.log(bytes)/Math.log(1024))); 
return (bytes/Math.pow(1024, i)).toFixed(1) + ' ' + sizes[i]; 
}; 

// check for selected crop region 
function checkForm() { 
    if (parseInt($('#w').val())) return true; 
    $('.error').html('Please select a crop region and then press Upload').show(); 
    return false; 
}; 

// update info by cropping (onChange and onSelect events handler) 
function updateInfo(e) { 
$('#x1').val(e.x); 
$('#y1').val(e.y); 
$('#x2').val(e.x2); 
$('#y2').val(e.y2); 
$('#w').val(e.w); 
$('#h').val(e.h); 
}; 

// clear info by cropping (onRelease event handler) 
function clearInfo() { 
$('.info #w').val(''); 
$('.info #h').val(''); 
}; 

function fileSelectHandler() { 

// get selected file 
var oFile = $('#image_file')[0].files[0]; 

// hide all errors 
$('.error').hide(); 

// check for image type (jpg and png are allowed) 
var rFilter = /^(image\/jpeg|image\/png)$/i; 
if (! rFilter.test(oFile.type)) { 
    $('.error').html('Please select a valid image file (jpg and png are allowed)').show(); 
    return; 
} 

// check for file size 
if (oFile.size > 55555250 * 1024) { 
    $('.error').html('You have selected too big file, please select a one smaller image file').show(); 
    return; 
} 

// preview element 
var oImage = document.getElementById('preview'); 

// prepare HTML5 FileReader 
var oReader = new FileReader(); 
    oReader.onload = function(e) { 

    // e.target.result contains the DataURL which we can use as a source of the image 
    oImage.src = e.target.result; 
    oImage.onload = function() { // onload event handler 

     // display step 2 
     $('.step2').fadeIn(500); 

     // display some basic image info 
     var sResultFileSize = bytesToSize(oFile.size); 
     $('#filesize').val(sResultFileSize); 
     $('#filetype').val(oFile.type); 
     $('#filedim').val(oImage.naturalWidth + ' x ' + oImage.naturalHeight); 

     // Create variables (in this scope) to hold the Jcrop API and image size 
     var jcrop_api, boundx, boundy; 

     // destroy Jcrop if it is existed 
     if (typeof jcrop_api != 'undefined') 
      jcrop_api.destroy(); 

     // initialize Jcrop 
     $('#preview').Jcrop({ 
      minSize: [32, 32], // min crop size 
      aspectRatio : 1, // keep aspect ratio 1:1 
      bgFade: true, // use fade effect 
      bgOpacity: .3, // fade opacity 
      onChange: updateInfo, 
      onSelect: updateInfo, 
      onRelease: clearInfo 
     }, function(){ 

      // use the Jcrop API to get the real image size 
      var bounds = this.getBounds(); 
      boundx = bounds[0]; 
      boundy = bounds[1]; 

      // Store the Jcrop API in the jcrop_api variable 
      jcrop_api = this; 
     }); 
    }; 
}; 

// read selected file as DataURL 
oReader.readAsDataURL(oFile); 
}

jquey.Jcrop.min.css

/* jquery.Jcrop.min.css v0.9.10 (build:20120429) */ 
.jcrop-holder{direction:ltr;text-align:left;} 
.jcrop-vline,.jcrop-hline{background:#FFF url(Jcrop.gif) top left repeat;font-size:0;position:absolute;} 
.jcrop-vline{height:100%;width:1px!important;} 
.jcrop-hline{height:1px!important;width:100%;} 
.jcrop-vline.right{right:0;} 
.jcrop-hline.bottom{bottom:0;} 
.jcrop-handle{background-color:#333;border:1px #eee solid;font-size:1px;} 
.jcrop-tracker{-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none;-webkit-user-select:none;height:100%;width:100%;} 
.jcrop-handle.ord-n{left:50%;margin-left:-4px;margin-top:-4px;top:0;} 
.jcrop-handle.ord-s{bottom:0;left:50%;margin-bottom:-4px;margin-left:-4px;} 
.jcrop-handle.ord-e{margin-right:-4px;margin-top:-4px;right:0;top:50%;} 
.jcrop-handle.ord-w{left:0;margin-left:-4px;margin-top:-4px;top:50%;} 
.jcrop-handle.ord-nw{left:0;margin-left:-4px;margin-top:-4px;top:0;} 
.jcrop-handle.ord-ne{margin-right:-4px;margin-top:-4px;right:0;top:0;} 
.jcrop-handle.ord-se{bottom:0;margin-bottom:-4px;margin-right:-4px;right:0;} 
.jcrop-handle.ord-sw{bottom:0;left:0;margin-bottom:-4px;margin-left:-4px;} 
.jcrop-dragbar.ord-n,.jcrop-dragbar.ord-s{height:7px;width:100%;} 
.jcrop-dragbar.ord-e,.jcrop-dragbar.ord-w{height:100%;width:7px;} 
.jcrop-dragbar.ord-n{margin-top:-4px;} 
.jcrop-dragbar.ord-s{bottom:0;margin-bottom:-4px;} 
.jcrop-dragbar.ord-e{margin-right:-4px;right:0;} 
.jcrop-dragbar.ord-w{margin-left:-4px;} 
.jcrop-light .jcrop-vline,.jcrop-light .jcrop-hline{background:#FFF;filter:Alpha(opacity=70)!important;opacity:.70!important;} 
.jcrop-light .jcrop-handle{-moz-border-radius:3px;-webkit-border-radius:3px;background-color:#000;border-color:#FFF;border-radius:3px;} 
.jcrop-dark .jcrop-vline,.jcrop-dark .jcrop-hline{background:#000;filter:Alpha(opacity=70)!important;opacity:.7!important;} 
.jcrop-dark .jcrop-handle{-moz-border-radius:3px;-webkit-border-radius:3px;background-color:#FFF;border-color:#000;border-radius:3px;} 
.jcrop-holder img,img.jcrop-preview{max-width:none;}

如果不明白你可以下载完整的脚本。（对不起，我的英文，我是意大利语）下载：http://dfiles.eu/files/6yazp1des

来源

2013-04-08 Francesco Mineo

回答迟了，但希望未来可以帮助别人处理JCrop中的大图。你不必做任何事情做大只是提供像JCrop的参数，这

$('#cropbox').Jcrop({ 
     aspectRatio: 1, //If you want to keep aspectRatio 
     boxWidth: 650, //Maximum width you want for your bigger images 
     boxHeight: 400, //Maximum Height for your bigger images 
     onSelect: updateCoords 
},function() 
{ 
     alert('Now you see smaller preview of your bigger one.'); 
});

的好处是，当你裁剪图像和获得的尺寸，你会得到真正的图像尺寸意味着你的大图像的尺寸和因此，您可以通过服务器裁剪图像，而不需要再计算任何东西，只需发送尺寸和裁剪。

来源

2014-01-16 21:51:39

作品像一个魅力 – Filip 2014-10-11 17:26:29

@Abdul Jabbar：非常感谢你，它也为我工作，你不知道多少沮丧我特别是大肖像图像，大分辨率，设置boxWidth，boxHeight解决了呃问题，我没有发现这在实际的插件文档http://deepliquid.com/content/Jcrop_Manual.html – 2015-04-06 20:26:52

@Sindersindersh我很高兴它帮助你。不用客气。 – 2015-04-07 08:17:18

试图仔细挑选我的话，让他们会更好地为你翻译。

缩小图像以适应jcrop窗口是一项复杂的任务。我用ColdFusion来做，所以我没有在php中为你提供例子。相反，我会给你一个做什么的清单。

将图像上传
阅读图像尺寸
显示在一个固定比例，适合在你的窗口
确定您的按比例缩小的图像进行比较，最大尺寸的图像何种比例图像
取jCrop给你的作物X，Y，宽度和高度的值，并将它们乘以比例尺
将作物应用于原始图像，但使用从步骤5获得的值

这样做的一个常见问题是获取不是整数的裁剪值，您通常需要将任意值舍入到最接近的整数以避免可能具有比图像大的裁切值。

来源

2013-04-09 00:51:52 invertedSpear

Jcrop有大尺寸图像

回答

相关问题