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. 关于Java中的equals方法

    关于Java中的equals方法 欢迎转载,但是请填写本人的博客园原址https://www.cnblogs.com/JNovice/p/9347099.html 一.什么是equals方法 equa ...

  2. Intelli系列代理部分报错：You have JVM property https.proxyHost set..

    You have JVM property https.proxyHost set to '...'. This may lead to incorrect behaviour. Proxy shou ...

  3. jQuery.data() 的实现方式,jQuery16018518865841457738的由来,jQuery后边一串数字的由来

    原文地址: http://xxing22657-yahoo-com-cn.iteye.com/blog/1042440 jQuery.data() 的实现方式 jQuery.data() 的作用是为普 ...

  4. NIO中的heap Buffer和direct Buffer区别

    在Java的NIO中,我们一般采用ByteBuffer缓冲区来传输数据,一般情况下我们创建Buffer对象是通过ByteBuffer的两个静态方法: ByteBuffer.allocate(int c ...

  5. [leetcode]Merge Intervals @ Python

    原题地址:https://oj.leetcode.com/problems/merge-intervals/ 题意: Given a collection of intervals, merge al ...

  6. BUG的严重级别分类 BUG状态标准

    英文参考 BUG的严重级别分类 Severity This field describes the impact of a bug. Blocker Blocks development and/or ...

  7. delphi判断.net FrameWork是否已安装

    判断系统中.NET FrameWork已安装版本的方法很多,比如检查C:\Windows\Microsoft.NET\Framework\下的子目录,但是子目录往往是包含版本号,比如v2.0.5072 ...

  8. listview加载数据

    首先我们需要理清思路:使用ListView显示数据是很方便的,ListVIew的数据之间通过适配器adapter去作为桥梁连接起来.当我们需要使用listview显示大量数据的时候,我们需要使用到分页 ...

  9. Android -- Camera.ShutterCallback

    干货 相机拍照的回调 /** * Equivalent to takePicture(shutter, raw, null, jpeg). * * @see #takePicture(ShutterC ...

  10. webstorm和intellij idea下如何自动编译sass和scss文件

    webstorm和intellij idea下如何自动编译sass和scss文件 https://segmentfault.com/a/1190000008996504 https://www.jia ...