You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 
 
 

136 lines
4.6 KiB

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
  6. <title></title>
  7. <script src="../js/mui.min.js"></script>
  8. <link href="../css/mui.min.css" rel="stylesheet" />
  9. <link href="../css/style.css" rel="stylesheet" />
  10. <script type="text/javascript" src="../js/serverurl.js"></script>
  11. <script type="text/javascript" src="../js/userinfos.js"></script>
  12. <link rel="stylesheet" href="../css/jquery.Jcrop.min.css" />
  13. </head>
  14. <body>
  15. <header class="mui-bar mui-bar-nav" style="position:relative;">
  16. <button type="button" class="mui-left mui-action-back mui-btn mui-btn-link mui-btn-nav">
  17. <span class="mui-icon mui-icon-left-nav"></span>取消
  18. </button>
  19. <h1 class="mui-title">裁剪</h1>
  20. <button class="mui-pull-right" style="margin-top: 5px;" id="btdocut">确定</button>
  21. </header>
  22. <div class="mui-content" id="headcontent" style="padding:5px 5px 5px 5px;">
  23. <img src="" id="target" alt="" />
  24. <input type="hidden" id="px">
  25. <input type="hidden" id="py">
  26. <input type="hidden" id="pw">
  27. <input type="hidden" id="ph">
  28. </div>
  29. <script type="text/javascript" src="../js/jquery-1.10.2.min.js"></script>
  30. <script src="../js/jquery.Jcrop.min.js"></script>
  31. <script type="text/javascript" charset="utf-8">
  32. function clipImage(bigphoto, smallphoto, x, y, w, h) {
  33. plus.nativeUI.showWaiting("正在保存头像...");
  34. plus.zip.compressImage({
  35. src: bigphoto,
  36. dst: smallphoto,
  37. overwrite: true,
  38. quality: 100,
  39. // width:plus.screen.resolutionWidth-10+"px",
  40. // height:plus.screen.resolutionHeight-80+"px",
  41. clip: {
  42. top: y,
  43. left: x,
  44. width: w,
  45. height: h
  46. }
  47. },
  48. function(ep) {
  49. DoUpload(ep.target);
  50. },
  51. function(error) {
  52. console.log("error" + error.message);
  53. });
  54. }
  55. function DoUpload(fileurl) {
  56. var task = plus.uploader.createUpload(api + "/user/upload", {
  57. method: "POST",
  58. blocksize: 0,
  59. priority: 100
  60. },
  61. function(t, status) {
  62. // 上传完成
  63. if(status == 200) {
  64. console.log(t.responseText)
  65. var entity=JSON.parse(t.responseText);
  66. var path = entity.info;
  67. console.log("上传成功!地址:"+path);
  68. users.photo=path;
  69. localStorage.setItem('taigangteacherUserModel', JSON.stringify(users));
  70. plus.webview.currentWebview().opener().evalJS("document.getElementById('photo').src='" +web+'/'+ path + "';document.getElementById('hidphoto').value='" + path + "';");
  71. plus.webview.currentWebview().opener().opener().evalJS("document.getElementById('photo').src='" +web+'/'+ path + "';");
  72. plus.nativeUI.closeWaiting();
  73. plus.webview.currentWebview().close();
  74. } else {
  75. console.log("Upload failed: " + t.message);
  76. }
  77. }
  78. );
  79. task.addFile("" + fileurl + "", {
  80. key: "UPhoto"
  81. });
  82. task.addData("data", "" + users.ID + "");
  83. //task.addEventListener("statechanged", onStateChanged, false);
  84. task.start();
  85. }
  86. var jcrop_api;
  87. function initJcrop(rw, rh) {
  88. jQuery("#target").Jcrop({
  89. trueSize: [rw, rh],
  90. aspectRatio: 1,
  91. allowSelect: false,
  92. onChange: function(selection) {
  93. document.getElementById("px").value = selection.x;
  94. document.getElementById("py").value = selection.y;
  95. document.getElementById("pw").value = selection.w;
  96. document.getElementById("ph").value = selection.h;
  97. },
  98. onSelect: function(selection) {
  99. document.getElementById("px").value = selection.x;
  100. document.getElementById("py").value = selection.y;
  101. document.getElementById("pw").value = selection.w;
  102. document.getElementById("ph").value = selection.h;
  103. }
  104. }, function() {
  105. jcrop_api = this;
  106. jcrop_api.setSelect([0, 0, 600, 600]);
  107. });
  108. }
  109. (function($, doc) {
  110. $.init();
  111. $.plusReady(function() {
  112. CheckLogin();
  113. var self = plus.webview.currentWebview();
  114. var headsrc = self.headsrc;
  115. var img = document.getElementById("target");
  116. img.src = headsrc;
  117. initJcrop(self.realwidth, self.realheight);
  118. img.style.width = plus.screen.resolutionWidth - 10 + "px";
  119. img.style.maxHeight = plus.screen.resolutionHeight - 80 + "px";
  120. document.getElementById("btdocut").addEventListener("tap", function() {
  121. clipImage(headsrc, "_doc/smallhead.jpg", document.getElementById("px").value, document.getElementById("py").value, document.getElementById("pw").value, document.getElementById("ph").value);
  122. img.src ="";
  123. });
  124. });
  125. }(mui, document));
  126. </script>
  127. </body>
  128. </html>