Input file show live selected image in JCrop

Question

I am using JCrop to resize and crop images.

I wanted to add a feature so the user can:

-Select a image file

-Use jcrop to edit

-Upload without changing the page

I can do all these separately, but I get bugs when I mix these.

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

The problem right now is, when I change the src location of id "target" main image, it doesn't show my new image. But when I do it on the id "target2" preview image it does show my new image and I can work on it.(But doesn't crop the new image when i press crop)

    <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

You can use:

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

to change the pic the drawback is in this way, you can not preview a pic correctly.

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