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命令学习系列（六）——jinfo

    jinfo可以输出java进程.core文件或远程debug服务器的配置信息.这些配置信息包括JAVA系统参数及命令行参数,如果进程运行在64位虚拟机上,需要指明-J-d64参数,如:jinfo -J ...

  2. [转]PHP traits

    From : http://www.php.net/manual/zh/language.oop5.traits.php 自 PHP 5.4.0 起,PHP 实现了代码复用的一个方法,称为 trait ...

  3. 【已解决】unity4.2.0f4 导出Android工程报错：Error building Player: ArgumentException: Illegal characters in path. [unity导出android工程 报错,路径含有非法字符]

    使用unity3D开发的一个客户端,需要导出为Android工程,然后接入一些第三方android SDK. unity版本 操作系统为: OS 名称: Microsoft Windows 7 旗舰版 ...

  4. ExtJS梦想之旅（八）--GridPanel和EditorGridPanel的使用

    表格在web开发中会经常被使用到,是一种非常重要的组件,因此ExtJS在这方面做得也很出色,在这里也作为一个重点的组件来和大家分享,共同探讨一下. Ext.grid.GridPanel此类系基于Gri ...

  5. maven单测生成覆盖率报告---Jacoco的使用

    JaCoCo介绍 一.JaCoCo简述 JaCoCo是一个开源的覆盖率工具,它针对的开发语言是java,其使用方法很灵活,可以嵌入到Ant.Maven中:可以作为Eclipse插件,可以使用其Java ...

  6. boost::asio::ip::tcp实现网络通信的小例子

    同步方式: Boost.Asio是一个跨平台的网络及底层IO的C++编程库,它使用现代C++手法实现了统一的异步调用模型. 头文件 #include <boost/asio.hpp> 名空 ...

  7. 2.1 jdk-spi的实现原理

    dubbo-spi是在jdk-spi的基础上进行重写优化,下面看一下jdk-spi. 一.作用 为接口自动寻找实现类. 二.实现方式 标准制定者制定接口 不同厂商编写针对于该接口的实现类,并在jar的 ...

  8. scrapy框架系列 (4) Scrapy Shell

    Scrapy Shell Scrapy终端是一个交互终端,我们可以在未启动spider的情况下尝试及调试代码,也可以用来测试XPath或CSS表达式,查看他们的工作方式,方便我们爬取的网页中提取的数据 ...

  9. 在PC上像普通winform程序调试WINCE程序

    在PC上像普通winform程序调试WINCE程序 步骤: 1. 在VS2008中到 工具→选项→设备工具→设备,选择对应的平台,另存为新的名称,如CEDesktopRun,关闭VS2008.(如果不 ...

  10. [leetcode]Word Search @ Python

    原题地址:https://oj.leetcode.com/problems/word-search/ 题意: Given a 2D board and a word, find if the word ...