輸入文件顯示JCrop中的實時選中圖像

Question

我正在使用JCrop調整圖像大小和裁剪圖像。

我想添加一個功能，使用戶可以：

- 選擇一個圖像文件

- 使用jcrop編輯

-upload 不改變頁面

我可以分開做所有這些，但是當我混合這些時我會遇到錯誤。

  $('#target').attr('src', e.target.result); 
      $('#target2').attr('src', e.target.result); 

現在的問題是，當我改變ID「目標」主圖像的src位置，它不顯示我的新形象。但是，當我這樣做是id爲「TARGET2」預覽圖像上它不顯示我的新形象，我可以在它的工作。（但不裁剪的新形象時，我按作物）

<script src="jquery.min.js"></script> 
<script src="jquery.Jcrop.js"></script> 
<script> 
function dudecmon(){ 
    jQuery(function($){ 

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

     // Grab some information about the preview pane 
     $preview = $('#preview-pane'), 
     $pcnt = $('#preview-pane .preview-container'), 
     $pimg = $('#preview-pane .preview-container img'), 

     xsize = $pcnt.width(), 
     ysize = $pcnt.height(); 

    console.log('init',[xsize,ysize]); 
    $('#target').Jcrop({ 
     onChange: updatePreview, 
     onSelect: updatePreview, 
     onSelect: updateCoords, 
     aspectRatio: xsize/ysize 
    },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; 

     // Move the preview into the jcrop container for css positioning 
     $preview.appendTo(jcrop_api.ui.holder); 
    }); 

    function updatePreview(c) 
    { 
     if (parseInt(c.w) > 0) 
     { 
     var rx = xsize/c.w; 
     var ry = ysize/c.h; 

     $pimg.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' 
     }); 
     } 
    }; 

    }); 
}; 
</script> 

<script> 

    function updateCoords(c) 
    { 
    $('#x').val(c.x); 
    $('#y').val(c.y); 
    $('#w').val(c.w); 
    $('#h').val(c.h); 
    }; 

    function checkCoords() 
    { 
    if (parseInt($('#w').val())) return true; 
    alert('Please select a crop region then press submit.'); 
    return false; 
    }; 

</script> 

<script> 
function readURL(input) { 
     if (input.files && input.files[0]) { 
      var reader = new FileReader(); 

      reader.onload = function (e) { 
       //jcrop_api.setImage(e.target.result); 
       $('#target').attr('src', e.target.result); 
       $('#target2').attr('src', e.target.result); 
      }; 
      reader.readAsDataURL(input.files[0]); 
      dudecmon(); 
     } 
    } 

</script> 



<link rel="stylesheet" href="jquery.Jcrop.css" type="text/css" /> 
<style type="text/css"> 

/* Apply these styles only when #preview-pane has 
    been placed within the Jcrop widget */ 
.jcrop-holder #preview-pane { 
    display: block; 
    position: absolute; 
    z-index: 2000; 
    top: 10px; 
    right: -280px; 
    padding: 6px; 
    border: 1px rgba(0,0,0,.4) solid; 
    background-color: white; 

    -webkit-border-radius: 6px; 
    -moz-border-radius: 6px; 
    border-radius: 6px; 

    -webkit-box-shadow: 1px 1px 5px 2px rgba(0, 0, 0, 0.2); 
    -moz-box-shadow: 1px 1px 5px 2px rgba(0, 0, 0, 0.2); 
    box-shadow: 1px 1px 5px 2px rgba(0, 0, 0, 0.2); 
} 

/* The Javascript code will set the aspect ratio of the crop 
    area based on the size of the thumbnail preview, 
    specified here */ 
#preview-pane .preview-container { 
    width: 250px; 
    height: 175px; 
    overflow: hidden; 
} 
</style> 


<img src="sago.jpg" id="target" alt="Jcrop Example" /> 

<div id="preview-pane"> 
    <div class="preview-container"> 
     <img src="sago.jpg" id="target2" class="jcrop-preview" alt="Preview" /> 
    </div> 
</div> 

<form action="image.php" enctype="multipart/form-data" method="post" onsubmit="return checkCoords();"> 
    <input type="file" name="file" name="imageinput" size="30" onchange="readURL(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="Crop Image" class="btn btn-large btn-inverse" /> 
</form> 

Answer 1

您可以使用：

jcrop_api.setImage('/crop/demo_files/'+$("#btn_change").val()); 

改變PIC缺點是這樣，你不能正確預覽照片。

<script type="text/javascript"> 
    jQuery(function($){ 
    var jcrop_api; 
     $('#btn_change').change(function(){ 
     $("#fielname").val($("#btn_change").val()); 
      jcrop_api.setImage('/crop/demo_files/'+$("#btn_change").val()); 

     }) 

    $('#croppic').click(function(){ 

     if(checkCoords()){ 
     var data = { x: $('#x').val(), y: $('#y').val(),w: $('#w').val(), h: $('#h').val(),fielname:$("#fielname").val() }; 

     $.post("http://localhost/crop/index.php/welcome/croppic",data, 
     function(backdata){ 
      if(backdata=="success"){ 
       jcrop_api.release(); 
       $('#cropmessage').html("<font color=red>thumb pic made please select another one</font>").delay(1000).fadeOut();; 
      } 
      else 
      { 
       $('#cropmessage').html("<font color=black>error in process </font>"); 
      } 
     }); 
     } 

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

    $('#target').Jcrop({ 
     onSelect: updateCoords, 
     aspectRatio: xsize/ysize 
    },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 updateCoords(c) 
    { 
    $('#x').val(c.x); 
    $('#y').val(c.y); 
    $('#w').val(c.w); 
    $('#h').val(c.h); 
    }; 


    function checkCoords() 
    { 
     if (parseInt($('#w').val())) return true; 
     alert('Please select a crop region then press submit.'); 
     return false; 
    }; 



    }); 

</script>