输入文件在 JCrop 中显示实时选择的图像

Posted 2023-02-25

【中文标题】输入文件在 JCrop 中显示实时选择的图像

【英文标题】：Input file show live selected image in JCrop

【发布时间】：2013-10-01 14:58:51

【问题描述】：

我正在使用 JCrop 来调整和裁剪图像。

我想添加一个功能，以便用户可以：

-选择一个图像文件

-使用jcrop进行编辑

-上传 无需更改页面

我可以单独做所有这些，但是当我混合这些时会出现错误。

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

现在的问题是，当我更改 id "target" 主图像的 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"  />

<div id="preview-pane">
    <div class="preview-container">
      <img src="sago.jpg" id="target2" class="jcrop-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>

【问题讨论】：

你能把你的链接显示在你使用该功能的地方吗

deepliquid.com/content/Jcrop.html 不知道你问了什么，但这里是 api？

【参考方案1】：

你可以使用：

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

换图片的缺点是这样，不能正确预览图片。

<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>