1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>裁剪头像</title>
  6. <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
  7. <link href="../css/mui.min.css" rel="stylesheet" />
  8. <link href="../css/cropper.css" rel="stylesheet" />
  9. <style type="text/css">
  10. body {
  11. background-color: #000000;
  12. }
  13. #cropper-example-1 {
  14. background-color: #000000;
  15. height: 93%;
  16. width: 100%;
  17. position: absolute;
  18. }
  19. #quxiao,
  20. #xuanzhuan,
  21. #xuanqu {
  22. font-size: 20px;
  23. }
  24. .divbut {
  25. width: 100%;
  26. text-align: center;
  27. position: fixed;
  28. z-index: 2;
  29. bottom: 0px;
  30. background-color: #000000;
  31. height: 7.5%;
  32. line-height: 50px;
  33. }
  34. .divbut>div:first-child {
  35. float: left;
  36. width: 20%;
  37. }
  38. .divbut>div:last-child {
  39. float: right;
  40. width: 20%;
  41. }
  42. img#im {
  43. height: 100%;
  44. width: 100%;
  45. }
  46. </style>
  47. </head>
  48. <body>
  49. <div id="cropper-example-1" class="mui-hidden">
  50. <img id="im" alt="Picture" />
  51. </div>
  52. <div class="divbut">
  53. <div>
  54. <p id="quxiao" class="iconfont icon-quxiao">取消</p>
  55. </div>
  56. <div>
  57. <p id="xuanqu" class="iconfont icon-queding">确认</p>
  58. </div>
  59. </div>
  60. <img src="" alt="" class="mui-hidden" id="im_exif" />
  61. <script src="../js/jquery-1.9.min.js"></script>
  62. <script src="../js/mui.min.js"></script>
  63. <script  src="../js/exif.js"></script>
  64. <script src="../js/cropper.min.js"></script>
  65. <script src="../js/app.min.js"></script>
  66. <script>
  67. (function(c) {
  68. var Cro = function() {}
  69. c.extend(Cro.prototype, {
  70. orientation: null,
  71. urldata: null,
  72. view: null,
  73. num: 0,
  74. sbx: null,
  75. sby: null,
  76. n: 0,
  77. onReady: function() {
  78. var that = this;
  79. mui.init();
  80. that.bindEvent();
  81. that.view = plus.webview.currentWebview();
  82. var img = document.getElementById("im_exif");
  83. img.src = that.view.path;
  84. img.addEventListener("load", function() {
  85. //exif调整图片的横竖
  86. EXIF.getData(this, function() {
  87. var orientation = EXIF.getAllTags(this).Orientation;
  88. $("#im").attr("src", that.loadcopyImg(img, orientation));
  89. document.getElementById("cropper-example-1").classList.remove("mui-hidden"); //显示裁剪区域
  90. that.cropperImg();
  91. });
  92. })
  93. },
  94. cropperImg: function() {
  95. var that = this;
  96. $('#cropper-example-1 > img').cropper({
  97. aspectRatio: 1 / 1,
  98. autoCropArea: 1,
  99. strict: true,
  100. background: false,
  101. guides: false,
  102. highlight: false,
  103. dragCrop: false,
  104. movable: false,
  105. resizable: false,
  106. crop: function(data) {
  107. that.urldata = that.base64(data);
  108. }
  109. });
  110. },
  111. loadcopyImg: function(img, opt) {
  112. var that = this;
  113. var canvas = document.createElement("canvas");
  114. var square = 500;
  115. var imageWidth, imageHeight;
  116. if(img.width > img.height) {
  117. imageHeight = square;
  118. imageWidth = Math.round(square * img.width / img.height);
  119. } else {
  120. imageHeight = square; //this.width;
  121. imageWidth = Math.round(square * img.width / img.height);
  122. }
  123. canvas.height = imageHeight;
  124. canvas.width = imageWidth;
  125. if(opt == 6) {
  126. that.num = 90;
  127. } else if(opt == 3) {
  128. that.num = 180;
  129. } else if(opt == 8) {
  130. that.num = 270;
  131. }
  132. if(that.num == 360) {
  133. that.num = 0;
  134. }
  135. var ctx = canvas.getContext("2d");
  136. ctx.translate(imageWidth / 2, imageHeight / 2);
  137. ctx.rotate(that.num * Math.PI / 180);
  138. ctx.translate(-imageWidth / 2, -imageHeight / 2);
  139. ctx.drawImage(img, 0, 0, imageWidth, imageHeight);
  140. var dataURL = canvas.toDataURL("image/jpeg", 1);
  141. return dataURL;
  142. },
  143. bindEvent: function() {
  144. var that = this;
  145. document.getElementById("quxiao").addEventListener("tap", function() {
  146. mui.back();            //取消就直接返回
  147. });
  148. document.getElementById("xuanqu").addEventListener("tap", function() {
  149. var preView = plus.webview.getWebviewById('plus/headinfo.html');
  150. //触发上一个页面刷新图片事件
  151. mui.fire(preView,'updateHeadImg',{
  152. img_path:that.urldata
  153. });
  154. mui.back();
  155. });
  156. },
  157. base64: function(data) {
  158. var that = this;
  159. var img = document.getElementById("im");
  160. var canvas = document.createElement("canvas");
  161. //像素
  162. canvas.height = 500;
  163. canvas.width = 500;
  164. var bx = data.x;
  165. var by = data.y;
  166. var ctx = canvas.getContext("2d");
  167. ctx.drawImage(img, bx, by, data.width, data.height, 0, 0, 500, 500);
  168. var dataURL = canvas.toDataURL("image/jpeg", 1.0);            //第二个参数是质量
  169. return dataURL;
  170. }
  171. });
  172. var cro = new Cro();
  173. c.plusReady(function() {
  174. cro.onReady();
  175. })
  176. })(mui)
  177. </script>
  178. </body>
  179. </html>

MUI(拍照+系统相册)图片上传剪切预览的更多相关文章

  1. MUI 图片上传剪切预览，可选（拍照+系统相册）

    整合网上的例子..麻蛋.没跑通..没办法.自己就拿他们的例子完善了一下..已经可以使用了! 准备工作: 这几个文件要引入.特别是JS 文件!!! <link href="../css/ ...

  2. 小程序实现图片上传，预览以及图片base64位处理

    最近一段时间在做小程序项目,第一期功也完工了.需要好好总结一下经验,把项目中遇到的问题好好总结一下,遇到的问题,踩过的坑.今天写一个小程序实现图片上传,预览,以及删除,图片base64位处理.下面就是 ...

  3. html之file标签 --- 图片上传前预览 -- FileReader

    记得以前做网站时,曾经需要实现一个图片上传到服务器前,先预览的功能.当时用html的<input type="file"/>标签一直实现不了,最后舍弃了这个标签,使用了 ...

  4. ASP.NET MVC图片上传前预览

    回老家过春节,大半个月,在家的日子里,吃好睡好,人也长了3.5Kg.没有电脑,没有网络,无需写代码,工作上相关的完全放下......开心与父母妻儿过个年,那样的生活令Insus.NET现在还在留恋.. ...

  5. 图片上传本地预览。兼容IE7+

    基于JQUERY扩展,图片上传预览插件 目前兼容浏览器(IE 谷歌 火狐) 不支持safari 预览地址:http://www.jinbanmen.com/test/1.html js代码:/**名称 ...

  6. DevExpress控件使用系列--ASPxUploadControl（图片上传及预览）

        1.控件功能     列表控件展示数据.弹框控件执行编辑操作.Tab控件实现多标签编辑操官方说明 2.官方示例       2.1 ASPxImage                http: ...

  7. uploadPreview 兼容多浏览器图片上传及预览插件使用

    uploadPreview兼容多浏览器图片上传及预览插件 http://www.jq22.com/jquery-info2757 Html 代码 <div class="form-gr ...

  8. js实现图片上传及预览---------------------->>兼容ie6-8 火狐以及谷歌

    <head runat="server"> <title>图片上传及预览(兼容ie6/7/8 firefox/chrome)</title> & ...

  9. file标签 - 图片上传前预览 - FileReader & 网络图片转base64和文件流

    记得以前做网站时,曾经需要实现一个图片上传到服务器前,先预览的功能.当时用html的<input type="file"/>标签一直实现不了,最后舍弃了这个标签,使用了 ...

随机推荐

  1. Bootstrap table的基本使用总结

    最近在学习BootStrap构建页面,现记录BootStrap table 的一些基本使用如下: HTML文件: <!DOCTYPE html> <html> <meta ...

  2. 多线程学习-ListenableFuture使用介绍以及示例

    Guava为Java并行编程Future提供了很多有用扩展,其主要接口为ListenableFuture,并借助于Futures静态扩展.ListenableFuture顾名思义就是可以监听的Futu ...

  3. 全景分割panopticapi使用

    文件解析 参考github:https://github.com/cocodataset/panopticapi 输入图像:

  4. PredicateBuilder类（linq多条件组合查询）

    PredicateBuilder类如下: public static class PredicateBuilder { /// <summary> /// 机关函数应用True时:单个AN ...

  5. light oj 1007 Mathematically Hard (欧拉函数)

    题目地址:light oj 1007 第一发欧拉函数. 欧拉函数重要性质: 设a为N的质因数.若(N % a == 0 && (N / a) % a == 0) 则有E(N)=E(N ...

  6. Delphi获取默认打印机名称及端口

    Delphi获取默认打印机名称及端口 在前段时间写的收银系统中由于目前市场上很多电脑主板上已经没有并口,而POS机却又需要并口,所以目前需要用PCI转接卡,这个就导致不同门店使用的端口就有可能不同,这 ...

  7. 教程 | Kaggle网站流量预测任务第一名解决方案：从模型到代码详解时序预测

    https://mp.weixin.qq.com/s/JwRXBNmXBaQM2GK6BDRqMw 选自GitHub 作者:Artur Suilin 机器之心编译 参与:蒋思源.路雪.黄小天 近日,A ...

  8. nginx不浏览直接下载文件

    当我们使用Nginx时,如果要让一些附件比如txt,pdf,doc等不直接在浏览器打开,而弹出另存为的对话框(也就是下载),则可以在nginx里添加如下配置: location /{if ($requ ...

  9. js的技巧

    字典: if(tac["detail"][sid] || tac["detail"][sid]==0) //判断某项是否存在,0为真 tac["det ...

  10. mongodb自动关闭：页面文件太小，无法完成操作

    在一台两G内存的win server 2008电脑上运行一个程序,一段时间后mongod自动停止,发现日志文件最后有这样的错误: 2014-11-30T00:32:32.914+0800 [conn3 ...