clip_photo2.html 6.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta name="author" content="yihu.com" />
  6. <meta name="format-detection" content="telephone=no" />
  7. <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
  8. <meta name="apple-mobile-web-app-capable" content="yes" />
  9. <meta name="apple-mobile-web-app-status-bar-style" content="black" />
  10. <title>剪切图片</title>
  11. <link rel="stylesheet" type="text/css" href="../../../common/cross/css/cross.css"/>
  12. <link rel="stylesheet" type="text/css" href="../../../common/cross/css/cross.ui.css"/>
  13. <style type="text/css">
  14. .bgc-000{
  15. background-color: #000;
  16. }
  17. </style>
  18. </head>
  19. <body>
  20. <div class="h45">
  21. <div class="demo-comtop">
  22. <a class="mui-action-back"></a>
  23. <h1 class="c-f18">我的资料</h1>
  24. </div>
  25. </div>
  26. <script src="../../../js/jquery/2.1.3/jquery.js"></script>
  27. <script src="../../../js/mui.min.js"></script>
  28. <script type="text/javascript" src="../../../js/common_http.js"></script>
  29. <script src="../js/upload_photo_modify.js" type="text/javascript" charset="utf-8"></script>
  30. <script src="../../js/common.js" type="text/javascript" charset="utf-8"></script>
  31. <script src="../../../js/app.js" type="text/javascript" charset="utf-8"></script>
  32. <script src="../js/transform.js" type="text/javascript" charset="utf-8"></script>
  33. <script src="../js/alloy_finger.js" type="text/javascript" charset="utf-8"></script>
  34. <script src="../js/alloy_crop.js" type="text/javascript" charset="utf-8"></script>
  35. <script src="../js/lrz.all.bundle.js" type="text/javascript" charset="utf-8"></script>
  36. <script type="text/javascript">
  37. var srcUrl, imgName;
  38. mui.init();
  39. mui.plusReady(function(){
  40. var self = plus.webview.currentWebview();
  41. srcUrl = self.srcUrl;
  42. imgName = self.imgName;
  43. var windowWidth = document.documentElement.clientWidth;
  44. lrz(srcUrl)
  45. .then(function (rst) {
  46. // 处理成功会执行
  47. new AlloyCrop({
  48. image_src: rst.base64,
  49. width: windowWidth,
  50. height: windowWidth,
  51. ok_text: "保存",
  52. cancel_text: "取消",
  53. ok: function(base64, canvas){
  54. var data=base64.split(',')[1];
  55. data=window.atob(data);
  56. var ia = new Uint8Array(data.length);
  57. for (var i = 0; i < data.length; i++) {
  58. ia[i] = data.charCodeAt(i);
  59. }
  60. var blob=new Blob([ia],{type:"image/png",endings:'transparent'});
  61. fileUrl = URL.createObjectURL(blob);
  62. isModify = true; //修改标记
  63. afterSaveCB = function(){
  64. var old_back = mui.back;
  65. mui.back=function(){
  66. // var gerenziliaoview = plus.webview.getWebviewById("gerenziliao");
  67. var selfwv = plus.webview.currentWebview(),
  68. gerenziliaoview = selfwv.opener();
  69. if(gerenziliaoview){
  70. mui.fire(gerenziliaoview,"getDocInfo");
  71. }
  72. old_back();
  73. };
  74. mui.back();
  75. };
  76. var fd=new FormData();
  77. fd.append('file',blob,'image.png');
  78. $.ajax(server + 'upload/image', {
  79. data: fd,
  80. dataType: 'json',
  81. contentType: false,
  82. cache: false,
  83. processData: false,
  84. type: 'post',
  85. error: function(res) {
  86. mui.toast("头像修改失败,请稍后重试");
  87. plus.nativeUI.closeWaiting();
  88. return;
  89. },
  90. success: function(res) {
  91. if(res.status == 999 || res.status == 998 || res.status == 997){
  92. mui.toast("头像修改失败,请稍后重试");
  93. plus.nativeUI.closeWaiting();
  94. return;
  95. }
  96. var params = {};
  97. params.photo = res.urls;
  98. var patientUrl = res.urls;
  99. fileHttpUrl = patientUrl;
  100. saveInfo();
  101. }
  102. });
  103. },
  104. cancel: function () {
  105. mui.back();
  106. }
  107. });
  108. })
  109. .catch(function (err){
  110. // 处理失败会执行
  111. console.log(err);
  112. });
  113. });
  114. </script>
  115. </body>
  116. </html>