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. C#与Java的语法差异

    C#与Java的语法差异C与Java的语法差异前言程序结构基本语法数据类型字符串变量与常量运算符判断语句循环语句访问权限方法数组结构枚举类继承多态运算符重载接口命名空间预处理器指令正则表达式异常IO泛 ...

  2. python的rsa公钥解密方法

    示例: # -*- coding: UTF- -*- import M2Crypto import base64 #私钥加密,公钥解密 def pri_encrypt(msg, file_name): ...

  3. 常用sql备份

    统计数据库中表格数据行数所占空间和索引情况 set nocount on exec sp_MSForEachTable @precommand=N' create table ##( id int i ...

  4. 浅谈提升C#正则表达式效率

     摘要:说到C#的Regex,谈到最多的应该就是RegexOptions.Compiled这个东西,传说中在匹配速度方面,RegexOptions.Compiled是可以提升匹配速度的,但在启动速度上 ...

  5. Elasticsearch 入门教程

    全文搜索属于最常见的需求,开源的 Elasticsearch (以下简称 Elastic)是目前全文搜索引擎的首选. 它可以快速地储存.搜索和分析海量数据.维基百科.Stack Overflow.Gi ...

  6. 浅谈Kmeans聚类

    http://www.cnblogs.com/easymind223/archive/2012/10/30/2747178.html 聚类分析是一种静态数据分析方法,常被用于机器学习,模式识别,数据挖 ...

  7. 【大数据】基于Hadoop的HBase的安装（转）

    https://note.youdao.com/share/?id=c27485373a08517f7ad2e7ec901cd8d5&type=note#/ 安装前先确认HBse和Hadoop ...

  8. express next function

    nodejs 里面的next()这个函数调用的作用是什么呢? var express = require('express'); var app = express(); var myLogger = ...

  9. TCP Socket Programming in Node.js

    TCP Socket Programming in Node.js Posted on October 26th, 2011 under Node.jsTags: Client, node.js, S ...

  10. Android短信收到，语音播报

    发送短信功能界面 /** * 发送短信Demo * * @description: * @author ldm * @date 2016-4-22 上午9:07:53 */ public class ...