MUI(拍照+系统相册)图片上传剪切预览

 

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


 

posted @ 2017-08-21 11:37  星火卓越  阅读(541)  评论(0)  编辑  收藏  举报