如何自動顯示圖像上的裁剪選擇

Question

我想知道如何使imgareaselect選擇照片文件時自動選擇？所以用戶知道他們可以裁剪到目前爲止我在照片中使用什麼：

我想實現的是當我選擇一個圖像文件我試圖讓imgareaselect選擇一部分照片自動。

imgareaselect文檔：http://odyniec.net/projects/imgareaselect/usage.html

jQuery代碼：

// set info for cropping image using hidden fields 
function setInfo(i, e) { 
// Get on screen image 
var screenImage = $("#uploadPreview"); 

// Create new offscreen image to test 
var theImage = new Image(); 
theImage.src = screenImage.attr("src"); 

// Get accurate measurements from that. 
var imageWidth = theImage.width; 

//Get width of resized image 
var scaledimagewidth = document.getElementById("uploadPreview").width; 

if (imageWidth > scaledimagewidth){ var ar = imageWidth/scaledimagewidth;} 
else { var ar = 1;} 
    $('#x').val(e.x1*ar); 
    $('#y').val(e.y1*ar); 
    $('#w').val(e.width*ar); 
    $('#h').val(e.height*ar); 
} 
$(document).ready(function() { 
    var p = $("#uploadPreview"); 
    // prepare instant preview 
    $("#uploadImage").change(function() { 
     // fadeOut or hide preview 
     p.fadeOut(); 
     // prepare HTML5 FileReader 
     var oFReader = new FileReader(); 
     oFReader.readAsDataURL(document.getElementById("uploadImage").files[0]); 
     oFReader.onload = function (oFREvent) { 
      var image = new Image(); 
      image.src = oFREvent.target.result; 
      image.onload = function() { 
       if ((this.width >= 4500) || (this.height >= 4500)) { 
        alert("Picture Has to Be Lower Than 4500 by 4500, choose another file"); 
       } 
       else { 
        p.attr('src', oFREvent.target.result).fadeIn(); 
       } 
       // access image size here & do further implementation 
      }; 
     }; 
    }); 
    // implement imgAreaSelect plug in (http://odyniec.net/projects/imgareaselect/) 
    $('img#uploadPreview').imgAreaSelect({ 
     aspectRatio: '1.33:1', 
     onSelectEnd: setInfo 
    }); 
}); 

HTML標記：

<div class="wrap"> 
     <!-- image preview area--> 
     <img id="uploadPreview" style="display:none;"/> 

     <!-- image uploading form --> 
     <form action="upload.php" method="post" enctype="multipart/form-data"> 
      <input id="uploadImage" type="file" accept="image/jpeg" name="image" /> 
      <input type="submit" value="Upload"> 

      <!-- hidden inputs --> 
      <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" /> 
     </form> 
    </div> 

Answer 1

這個答案似乎是通過（jQuery imgAreaSelect set initial selection with aspect ratio）

// adds an image area select instance 
function addImgAreaSelect(img){ 
     img.addClass('imgAreaSelect').imgAreaSelect({ 
       handles : true, 
       aspectRatio : '16:9', 
       fadeSpeed : 1, 
       show : true 
     }); 
     img.load(function(){ // display initial image selection 16:9 
        var height = (this.width/16) * 9; 
        if(height <= this.height){  
          var diff = (this.height - height)/2; 
          var coords = { x1 : 0, y1 : diff, x2 : this.width, y2 : height + diff }; 
        } 
        else{ // if new height out of bounds, scale width instead 
          var width = (this.height/9) * 16; 
          var diff = (this.width - width)/2; 
          var coords = { x1 : diff, y1 : 0, x2 : width + diff, y2: this.height }; 
        } 
       $(this).imgAreaSelect(coords); 
     }); 
} 

工作