PHP群：95885625 Hbuilder+MUI群：81989597 站长QQ：634381967
     | 积分获取 | 给我留言 | tag标签
    全站搜索
    关键字： 图书分类 纵向导航 QQ表情插件 js代码特效 折叠 防止 房子 seo
    您现在的位置： 首页 > 开发编程 > HBuilderX教程 > 正文

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

    作者：admin来源：网络浏览：次时间：2020-09-30 00:07:50我要评论
    导读：今天B5教程网没事整合了一下，MUI(拍照+系统相册)图片上传剪切预览功能，分享给大家，希望对大家学习有所帮助，不足地方多多包涵。
    今天B5教程网没事整合了一下，MUI(拍照+系统相册)图片上传剪切预览功能，分享给大家，希望对大家学习有所帮助，不足地方多多包涵。

    准备工作： 这几个文件要引入。特别是JS 文件！！！

    1. <link href="../css/mui.min.css" rel="stylesheet" /> 
    2.  <link href="../css/cropper.css" rel="stylesheet" /> 
    3.  
    4. <script src="../js/mui.min.js"></script> 
    5. <script src="../js/app.min.js"></script> 
    6. <script src="../js/jquery-1.9.min.js"></script>   
    7. <script  src="../js/exif.js"></script> 
    8. <script src="../js/cropper.min.js"></script> 
    1. app.min.js : https://github.com/kikinteractive/app/tree/master
    2. cropper.js : https://github.com/fengyuanchen/cropper
    3. exif.js  :  https://github.com/exif-js/exif-js
    1 主文件编辑页面： headinfo.html

    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.                 <style type="text/css"> 
    9.          
    10.              
    11.             #head { 
    12.                 line-height: 40px; 
    13.             } 
    14.              
    15.             .head-img { 
    16.                 width: 40px; 
    17.                 height: 40px; 
    18.             } 
    19.              
    20.             #head-img1 { 
    21.                 position: absolute; 
    22.                 bottom: 10px; 
    23.                 right: 40px; 
    24.                 width: 40px; 
    25.                 height: 40px; 
    26.             } 
    27.              
    28.            
    29.         </style> 
    30.     </head> 
    31.     <body> 
    32.         <header class="mui-bar mui-bar-nav"> 
    33.             <button type="button" class="mui-left mui-action-back mui-btn  mui-btn-link mui-btn-nav mui-pull-left"> 
    34.                     完成 
    35.             </button> 
    36.             <h1 class="mui-title">头像修改</h1> 
    37.         </header> 
    38.         <div class="mui-content"> 
    39.             <ul class="mui-table-view"> 
    40.                 <li class="mui-table-view-cell"> 
    41.                     <a id="head" class="mui-navigate-right">个人头像 
    42.                         <span class="mui-pull-right head"> 
    43.                             <img class="head-img mui-action-preview" id="head-img1" src=""/> 
    44.                         </span> 
    45.                     </a> 
    46.                 </li> 
    47.             </ul> 
    48.         </div> 
    49.  
    50.          <script src="../js/mui.min.js"></script> 
    51.         <script src="../js/app.min.js"></script> 
    52.         <script type="text/javascript"> 
    53.             (function($) { 
    54.                 $.init(); 
    55.                 $.plusReady(function() { 
    56.                     //初始化头像，和预览图 
    57.                     setTimeout(function() { 
    58.                         //赋值一个默认的头像 
    59.                         document.getElementById("head-img1").src = "../img/add.png"; 
    60.                         setTimeout(function() { 
    61.                             initImgPreview(); 
    62.                         }, 200); 
    63.                     }, 0); 
    64.  
    65.                     //弹出菜单 
    66.                     mui(".mui-table-view-cell").on("tap", "#head", function(e) { 
    67.                         if(mui.os.plus) { 
    68.                             var a = [{ 
    69.                                 title: "拍照" 
    70.                             }, { 
    71.                                 title: "从手机相册选择" 
    72.                             }]; 
    73.                             plus.nativeUI.actionSheet({ 
    74.                                 title: "修改头像", 
    75.                                 cancel: "取消", 
    76.                                 buttons: a 
    77.                             }, function(b) { 
    78.                                 switch(b.index) { 
    79.                                     case 0: 
    80.                                         break; 
    81.                                     case 1: 
    82.                                         getImage(); 
    83.                                         break; 
    84.                                     case 2: 
    85.                                         galleryImg(); 
    86.                                         break; 
    87.                                     default: 
    88.                                         break 
    89.                                 } 
    90.                             }) 
    91.                         } 
    92.  
    93.                     }); 
    94.                 }); 
    95.  
    96.                 //拍照 
    97.                 function getImage() { 
    98.                     var c = plus.camera.getCamera(); 
    99.                     c.captureImage(function(e) { 
    100.                         //存储到本地 
    101.                         plus.io.resolveLocalFileSystemURL(e, function(entry) { 
    102.                             cutImage(entry.toLocalURL());//裁剪图片，传入绝对地址 
    103.                         }, function(e) { 
    104.                             console.log("读取拍照文件错误：" + e.message); 
    105.                         }); 
    106.                     }, function(s) { 
    107.                         console.log("error" + s); 
    108.                     }, { 
    109.                         filename: "_doc/head.jpg" 
    110.                     }) 
    111.                 } 
    112.  
    113.                 //相册 
    114.                 function galleryImg() { 
    115.                     plus.gallery.pick(function(a) { 
    116.                         plus.io.resolveLocalFileSystemURL(a, function(entry) { 　　　　　　//entry为图片原目录（相册）流 
    117.                             cutImage(entry.toLocalURL()); 
    118.                         }, function(e) { 
    119.                             console.log("读取图片错误：" + e.message); 
    120.                         }); 
    121.                     }, function(a) {}, { 
    122.                         filter: "image" 
    123.                     }) 
    124.                 }; 
    125.  
    126.                 
    127.                 //预览图像 
    128.                 document.getElementById("head-img1").addEventListener('tap', function(e) { 
    129.                     e.stopPropagation(); //阻止冒泡 
    130.                 }); 
    131.  
    132.                 function initImgPreview() { 
    133.                     var imgs = document.querySelectorAll("img.mui-action-preview"); 
    134.                     imgs = mui.slice.call(imgs); 
    135.                     if(imgs && imgs.length > 0) { 
    136.                         var slider = document.createElement("div"); 
    137.                         slider.setAttribute("id", "__mui-imageview__"); 
    138.                         slider.classList.add("mui-slider"); 
    139.                         slider.classList.add("mui-fullscreen"); 
    140.                         slider.style.display = "none"; 
    141.                         slider.addEventListener("tap", function() { 
    142.                             slider.style.display = "none"; 
    143.                         }); 
    144.                         slider.addEventListener("touchmove", function(event) { 
    145.                             event.preventDefault(); 
    146.                         }) 
    147.                         var slider_group = document.createElement("div"); 
    148.                         slider_group.setAttribute("id", "__mui-imageview__group"); 
    149.                         slider_group.classList.add("mui-slider-group"); 
    150.                         imgs.forEach(function(value, index, array) { 
    151.                             //给图片添加点击事件，触发预览显示； 
    152.                             value.addEventListener('tap', function() { 
    153.                                 slider.style.display = "block"; 
    154.                                 _slider.refresh(); 
    155.                                 _slider.gotoItem(index, 0); 
    156.                             }) 
    157.                             var item = document.createElement("div"); 
    158.                             item.classList.add("mui-slider-item"); 
    159.                             var a = document.createElement("a"); 
    160.                             var img = document.createElement("img"); 
    161.                             img.setAttribute("src", value.src); 
    162.                             a.appendChild(img) 
    163.                             item.appendChild(a); 
    164.                             slider_group.appendChild(item); 
    165.                         }); 
    166.                         slider.appendChild(slider_group); 
    167.                         document.body.appendChild(slider); 
    168.                         var _slider = mui(slider).slider(); 
    169.                     } 
    170.                 } 
    171.  
    172.                 //裁剪图片 
    173.                 function cutImage(path) { 
    174.                     $.openWindow({ 
    175.                         url: 'cropper.html', 
    176.                         id: 'cropper', 
    177.                         extras: { 
    178.                             path: path, 
    179.                         }, 
    180.                         show: { 
    181.                             aniShow: 'zoom-fade-in', 
    182.                             duration: 800 
    183.                         }, 
    184.                         waiting: { 
    185.                             autoShow: true 
    186.                         } 
    187.                     }); 
    188.                 } 
    189.                  
    190.                 //更新用户头像，主要是裁剪页面裁剪完后触发的 
    191.                 //添加updateHeadImg自定义事件监听 
    192.                 window.addEventListener('updateHeadImg',function(event){ 
    193.                   //获得事件参数 www.bcty365.com 
    194.                   var my_icon = event.detail.img_path; 
    195.                   //根据id向服务器请求新闻详情 
    196.                   if(my_icon != "") { 
    197.                         document.getElementById("head-img1").src = my_icon; 
    198.                         document.querySelector("#__mui-imageview__group .mui-slider-item img").src = my_icon; 
    199.                     } 
    200.                 }); 
    201.                                  
    202.             })(mui); 
    203.         </script> 
    204.     </body> 
    205.  
    206. </html> 

    2 剪切文件： cropper.html

    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> 








    转载请注明（B5教程网）原文链接：https://b5.mxunkeji.com/content-146-5648-1.html
    相关热词搜索： MUI图片上传 MUI图片预览
    分享按钮
    上一篇：mui 流应用常见FAQ汇总
    下一篇：mui css 多行文本的溢出显示省略号(移动端)

    最新推荐

    关于我们

    关于我们

    赞助我们

    加入我们

    版权声明

    联系我们

    联系我们

    QQ技术群

    合作方式

    广告服务

    业务合作

    常见问题

    意见反馈

    网站地图

    在线投稿

    积分获取

    在线充值

    本站不承担任何版权问题，如果我们侵犯了您的利益，请来信
    告知(634381967@qq.com)，我们会在第一时间处理！
    © 苏ICP备20040182号
    B5教程网 版权所有