Code to browse crop and upload profile photo as like in gmail settings? [closed]

StackOverflow https://stackoverflow.com//questions/25079600

Question

Can anybody suggest the name of the gooogle api or the required jquery script & files to browse crop and upload profile photo as like in gmail settings?

To chnage the profile image In gmail we click over "Change Picture" and get an option to upload image in a modal.Then we browse an image and crop it and then upload it, there in modal. I need that exact thing in my application too. I tried it to do by following "http://odyniec.net/projects/imgareaselect/examples.html". Everything works fine.But during cropping the rectangular/square box is not coming. Its work fine if I don't do it on modal. But as i have to do it on a modal hence I need help. I am using cakephp, jquery-2.1.1, jquery.blockUI-2.66.0, jquery.imgareaselect.pack and jquery-pack.

I would like to know is there any API provided by google to do so..It would be a great help if anybody could guide me to solve my problem...

I used http://www.jqueryrain.com/?BEAlLLl9 and finished the task.

Was it helpful?

Solution

Try this code. This worked for me in my project.I am not giving the backend or uploading code the main intention is to open modal popup and crop the image. Include all css and scripts file given by the imageAreaSelect plugin. 

              <head>
                  <script src="jquery.min.js"></script>
                  <script src="jquery.imgareaselect.min.js"></script>
                  <script src="jquery.imgareaselect.pack.js"></script>
                  <script src="bootstrap/js/bootstrap.min.js"></script>
                  <link rel="stylesheet" href="bootstrap.css" />
                  <link rel="stylesheet" href="imgareaselect-default.css" />
                  <link rel="stylesheet" href="modal.css" />

                  <script type="text/javascript">
                  $(document).ready(function(){
                    $('#change').click(function(){
                        $("#myModal").modal('show');
                    });
                    $('#myImg').imgAreaSelect();
                  });
                  </script>
              </head>
              <body>
                   <button id="change">Change Photo</button>
                   <div  id="myModal" class="modal hide fade myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
                      <img src="bitroots.jpg" id="myImg">
                       <div class="modal-footer">
                  <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                  <button type="button" class="btn btn-primary">Save changes</button>
                </div>
                  </div>
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top