javascript - Cropping Uploaded Image using Jcrop - Stack Overflow

admin管理员组

文章数量:1287598

I am trying to crop an uploaded image using Jcrop. My intention is to crop the image when the user upload. I need not store the user uploaded image in the server. But, I should store only the part of image user selects via Jcrop to the server. Here is the fiddle link for the problem

I have used the following code:

HTML:

<form id="form1">
    <input type='file' id="imgInp" />
    <img id="blah" class="crop" src="#" alt="your image" />
    <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>

CSS:

<style>
#blah {
    background-color: #FFF;
    width: 500px;
    height: 330px;
    font-size: 24px;
    display: block;
  }
</style>

Js:

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

            reader.onload = function (e) {
                $('#blah').attr('src', e.target.result);
            }

            reader.readAsDataURL(input.files[0]);
        }
    }

    $("#imgInp").change(function(){
        console.log(this);
        readURL(this);
         $(function(){

    $('.crop').Jcrop({

      onSelect: updateCoords,

            bgOpacity:   .4,
            setSelect:   [ 100, 100, 50, 50 ],
            aspectRatio: 16 / 9
    });

  });
    });

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

I tried like, after uploading image, the same image is used for JCrop, so that I can get the co-ordinate values to generate the rest of the image. My problem now is this: When uploaded, I get black color in the image spot rather than the uploaded image. Can anyone look into it and find what was wrong with the code?

I am trying to crop an uploaded image using Jcrop. My intention is to crop the image when the user upload. I need not store the user uploaded image in the server. But, I should store only the part of image user selects via Jcrop to the server. Here is the fiddle link for the problem

I have used the following code:

HTML:

<form id="form1">
    <input type='file' id="imgInp" />
    <img id="blah" class="crop" src="#" alt="your image" />
    <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>

CSS:

<style>
#blah {
    background-color: #FFF;
    width: 500px;
    height: 330px;
    font-size: 24px;
    display: block;
  }
</style>

Js:

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

            reader.onload = function (e) {
                $('#blah').attr('src', e.target.result);
            }

            reader.readAsDataURL(input.files[0]);
        }
    }

    $("#imgInp").change(function(){
        console.log(this);
        readURL(this);
         $(function(){

    $('.crop').Jcrop({

      onSelect: updateCoords,

            bgOpacity:   .4,
            setSelect:   [ 100, 100, 50, 50 ],
            aspectRatio: 16 / 9
    });

  });
    });

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

I tried like, after uploading image, the same image is used for JCrop, so that I can get the co-ordinate values to generate the rest of the image. My problem now is this: When uploaded, I get black color in the image spot rather than the uploaded image. Can anyone look into it and find what was wrong with the code?

• javascript
• jquery
• html
• css
• jcrop

Share Improve this question Follow edited Apr 9, 2014 at 14:44 Ganesh Babu asked Apr 9, 2014 at 14:38 Ganesh BabuGanesh Babu 3,6701111 gold badges3535 silver badges6767 bronze badges 1

• I think you can use a canvas and get the image data from the canvas w3schools./tags/canvas_getimagedata.asp, I don't know if jcrop uses a canvas, maybe you need something different than jcrop if it doesn't use it. – arieljuod Commented Apr 9, 2014 at 15:14

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 7

The problem with the image showing as black is occurring because you are calling jCrop on the image before it actually loads. You can put the call to jCrop after the reader.onload call so it will run after the image loads. See this :

reader.onload = function (e) {
     $('#blah').attr('src', e.target.result);
     $('.crop').Jcrop({       
         onSelect: updateCoords,
         bgOpacity:   .4,
         setSelect:   [ 100, 100, 50, 50 ],
         aspectRatio: 16 / 9
      });
}

Here is an updated fiddle

I seems that the Jcrop has't been updated for a long time and it doesn't support IE 11. The drawback is that it doesn't do cropping images itself. It solely gives you the coordinates, then you upload them with the original images to the web server, then you crop at the server.

Take a look at the answer here. It gives you an option to use the Jcrop & Upload plugin to crop, resize, scale in the browser and upload the cropped images to the server. This plugin uses the HTML 5 Canvas element to crop the images and it supports IE 11.

本文标签： javascriptCropping Uploaded Image using JcropStack Overflow