jquery - 输入文件在 JCrop 中显示实时选定的图像

Question

我正在使用 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" 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());

更改图片的缺点是，无法正确预览图片。

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