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. [转]XCache 3.0.0 发布，PHP 性能提升方案

    From : http://www.oschina.net/news/34304/xcache-3-0-0 XCache 3.0.0 发布,该版本除了 bug 修复,对 XCache 管理页面做了很多 ...

  2. fromdata上传文件,ajax上传文件, 纯js上传文件,html5文件异步上传

    前端代码: 上传附件(如支付凭证等) <input type="file" name="fileUpload" id="fileUpload&q ...

  3. verilog语法实例学习(10)

    常用的时序电路介绍 T触发器和JK触发器 在D触发器输入端添加一些简单的逻辑电路,可以生成另一种类型的存储元件.比如下图所示的T触发器.该电路有一个上升沿触发的触发器和两个与门,一个或门,以及一个反相 ...

  4. 计算机中的概念: 视图 VS 镜像

    这两个概念还是不太一样的.下面来说说个人的理解,记录一下. 1. 镜像 镜像可以理解为一份完全一样的拷贝.也就是"深度拷贝",一个复制品. 比如 iso映像文件,ubuntu-12 ...

  5. 开源3D软件——大集合【转】

    要3D打印一件作品,自然少不了3D建模.以下是一些免费开源3D模型设计软件: Blender Blender是最受欢迎的免费开源3D模型制作软件套装. 跨平台支持所有的主要操作系统. 功能非常强大,但 ...

  6. 2014年.net程序员年终总结

    2014年经历了3家公司,感觉这一年工作不怎么顺利,在2013年1月进入一家外企从事软件架构设计.开发测试.部署实施的相关工作,在2013年感觉工作很充实,在2014年由于项目的原因被迫去做项目维护, ...

  7. C#线程同步方法汇总

    我们在编程的时候,有时会使用多线程来解决问题,比如你的程序需要在 后台处理一大堆数据,但还要使用户界面处于可操作状态:或者你的程序需要访问一些外部资源如数据库或网络文件等.这些情况你都可以创建一个子线 ...

  8. 简单使用Google Analytics监控网站浏览行为

    之前对网页做用户转化率调查这块,找到了谷歌GA事件,现在有时间对使用方法和遇到问题做个简单记录.官方文档其实也介绍的比较清楚,可以查看官方文档. 首先,在官网申请UA-id,然后在主页加入如下代码: ...

  9. grunt-cmd-transport提取deps[]的BUG

    该BUG已经在GitHub上提了issue,详见:#56 文件 // employee/static/adder.js define(function (require, exports) { exp ...

  10. win7下使用Taste实现协同过滤算法

    如果要实现Taste算法,必备的条件是: 1) JDK,使用1.6版本.需要说明一下,因为要基于Eclipse构建,所以在设置path的值之前要先定义JAVA_HOME变量. 2) Maven,使用2 ...