• 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.                  100%; 
    19.                 position: absolute; 
    20.             } 
    21.              
    22.             #quxiao, 
    23.             #xuanzhuan, 
    24.             #xuanqu { 
    25.                 font-size: 20px; 
    26.             } 
    27.              
    28.             .divbut { 
    29.                  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.                  20%; 
    42.             } 
    43.              
    44.             .divbut>div:last-child { 
    45.                 float: right; 
    46.                  20%; 
    47.             } 
    48.              
    49.             img#im { 
    50.                 height: 100%; 
    51.                  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> 
  • 相关阅读:
    es6新增特性，数组的操作方法
    导航钩子有哪几种，如何将数据传入下一个点击的路由页面
    父组件如何获取子组件数据，子组件如何获取父组件数据，父子组件如何传值
    watch和computed的区别
    vue页面中定时器的使用
    table表格，顶端对齐
    计算机组成原理8-FPGA、ASIC、TPU、虚拟机
    vue中使用socket连接后台
    计算机组成原理7-CISC和RISC、GPU
    计算机组成原理6-流水线、多发射和超标量、SIMD、异常
  • 原文地址：https://www.cnblogs.com/amylis_chen/p/7403490.html
Copyright © 2020-2023  润新知