1

任何人都可以建议gooogle api的名称或所需的jquery脚本和文件来浏览裁剪和上传个人资料照片，就像在gmail设置中一样？

要更改个人资料图片 在 gmail 中，我们单击“更改图片”并获得以模式上传图像的选项。然后我们浏览图像并裁剪它，然后以模式上传。我的应用程序中也需要那个确切的东西。我尝试按照“ http://odyniec.net/projects/imgareaselect/examples.html ”来做到这一点。一切正常。但是在裁剪矩形/方形框时没有出现。如果我不在模态上做它工作正常。但是因为我必须在模态上做，所以我需要帮助。我正在使用 cakephp、jquery-2.1.1、jquery.blockUI-2.66.0、jquery.imgareaselect.pack 和 jquery-pack。

我想知道谷歌是否提供了任何API来做到这一点。如果有人能指导我解决我的问题，那将是一个很大的帮助......

我使用了http://www.jqueryrain.com/?BEAllLl9并完成了任务。

4

1 回答 1

3

试试这个代码。这在我的项目中对我有用。我没有给后端或上传代码，主要目的是打开模式弹出窗口并裁剪图像。包括 imageAreaSelect 插件提供的所有 css 和脚本文件。 

              <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>
于 2014-08-02T13:05:24.753 回答