整合网上的例子。。麻蛋。没跑通。。没办法。自己就拿他们的例子完善了一下。。已经可以使用了！
准备工作： 这几个文件要引入。特别是JS 文件！！！
<link href="../css/mui.min.css" rel="stylesheet" /> <link href="../css/cropper.css" rel="stylesheet" /> <script src="../js/mui.min.js"></script> <script src="../js/app.min.js"></script> <script src="../js/jquery-1.9.min.js"></script> <script src="../js/exif.js"></script> <script src="../js/cropper.min.js"></script>
- app.min.js : https://github.com/kikinteractive/app/tree/master
- cropper.js : https://github.com/fengyuanchen/cropper
- exif.js : https://github.com/exif-js/exif-js
1 主文件编辑页面： headinfo.html
<!doctype html> <html> <head> <meta charset="UTF-8"> <title>我的资料</title> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> <link href="../css/mui.min.css" rel="stylesheet" /> <style type="text/css"> #head { line-height: 40px; } .head-img { width: 40px; height: 40px; } #head-img1 { position: absolute; bottom: 10px; right: 40px; width: 40px; height: 40px; } </style> </head> <body> <header class="mui-bar mui-bar-nav"> <button type="button" class="mui-left mui-action-back mui-btn mui-btn-link mui-btn-nav mui-pull-left"> 完成 </button> <h1 class="mui-title">头像修改</h1> </header> <div class="mui-content"> <ul class="mui-table-view"> <li class="mui-table-view-cell"> <a id="head" class="mui-navigate-right">个人头像 <span class="mui-pull-right head"> <img class="head-img mui-action-preview" id="head-img1" src=""/> </span> </a> </li> </ul> </div> <script src="../js/mui.min.js"></script> <script src="../js/app.min.js"></script> <script type="text/javascript"> (function($) { $.init(); $.plusReady(function() { //初始化头像，和预览图 setTimeout(function() { //赋值一个默认的头像 document.getElementById("head-img1").src = "../img/add.png"; setTimeout(function() { initImgPreview(); }, 200); }, 0); //弹出菜单 mui(".mui-table-view-cell").on("tap", "#head", function(e) { if(mui.os.plus) { var a = [{ title: "拍照" }, { title: "从手机相册选择" }]; plus.nativeUI.actionSheet({ title: "修改头像", cancel: "取消", buttons: a }, function(b) { switch(b.index) { case 0: break; case 1: getImage(); break; case 2: galleryImg(); break; default: break } }) } }); }); //拍照 function getImage() { var c = plus.camera.getCamera(); c.captureImage(function(e) { //存储到本地 plus.io.resolveLocalFileSystemURL(e, function(entry) { cutImage(entry.toLocalURL());//裁剪图片，传入绝对地址 }, function(e) { console.log("读取拍照文件错误：" + e.message); }); }, function(s) { console.log("error" + s); }, { filename: "_doc/head.jpg" }) } //相册 function galleryImg() { plus.gallery.pick(function(a) { plus.io.resolveLocalFileSystemURL(a, function(entry) { //entry为图片原目录（相册）流 cutImage(entry.toLocalURL()); }, function(e) { console.log("读取图片错误：" + e.message); }); }, function(a) {}, { filter: "image" }) }; //预览图像 document.getElementById("head-img1").addEventListener('tap', function(e) { e.stopPropagation(); //阻止冒泡 }); function initImgPreview() { var imgs = document.querySelectorAll("img.mui-action-preview"); imgs = mui.slice.call(imgs); if(imgs && imgs.length > 0) { var slider = document.createElement("div"); slider.setAttribute("id", "__mui-imageview__"); slider.classList.add("mui-slider"); slider.classList.add("mui-fullscreen"); slider.style.display = "none"; slider.addEventListener("tap", function() { slider.style.display = "none"; }); slider.addEventListener("touchmove", function(event) { event.preventDefault(); }) var slider_group = document.createElement("div"); slider_group.setAttribute("id", "__mui-imageview__group"); slider_group.classList.add("mui-slider-group"); imgs.forEach(function(value, index, array) { //给图片添加点击事件，触发预览显示； value.addEventListener('tap', function() { slider.style.display = "block"; _slider.refresh(); _slider.gotoItem(index, 0); }) var item = document.createElement("div"); item.classList.add("mui-slider-item"); var a = document.createElement("a"); var img = document.createElement("img"); img.setAttribute("src", value.src); a.appendChild(img) item.appendChild(a); slider_group.appendChild(item); }); slider.appendChild(slider_group); document.body.appendChild(slider); var _slider = mui(slider).slider(); } } //裁剪图片 function cutImage(path) { $.openWindow({ url: 'cropper.html', id: 'cropper', extras: { path: path, }, show: { aniShow: 'zoom-fade-in', duration: 800 }, waiting: { autoShow: true } }); } //更新用户头像，主要是裁剪页面裁剪完后触发的 //添加updateHeadImg自定义事件监听 window.addEventListener('updateHeadImg',function(event){ //获得事件参数 var my_icon = event.detail.img_path; //根据id向服务器请求新闻详情 if(my_icon != "") { document.getElementById("head-img1").src = my_icon; document.querySelector("#__mui-imageview__group .mui-slider-item img").src = my_icon; } }); })(mui); </script> </body> </html>
2 剪切文件： cropper.html
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>裁剪头像</title> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> <link href="../css/mui.min.css" rel="stylesheet" /> <link href="../css/cropper.css" rel="stylesheet" /> <style type="text/css"> body { background-color: #000000; } #cropper-example-1 { background-color: #000000; height: 93%; width: 100%; position: absolute; } #quxiao, #xuanzhuan, #xuanqu { font-size: 20px; } .divbut { width: 100%; text-align: center; position: fixed; z-index: 2; bottom: 0px; background-color: #000000; height: 7.5%; line-height: 50px; } .divbut>div:first-child { float: left; width: 20%; } .divbut>div:last-child { float: right; width: 20%; } img#im { height: 100%; width: 100%; } </style> </head> <body> <div id="cropper-example-1" class="mui-hidden"> <img id="im" alt="Picture" /> </div> <div class="divbut"> <div> <p id="quxiao" class="iconfont icon-quxiao">取消</p> </div> <div> <p id="xuanqu" class="iconfont icon-queding">确认</p> </div> </div> <img src="" alt="" class="mui-hidden" id="im_exif" /> <script src="../js/jquery-1.9.min.js"></script> <script src="../js/mui.min.js"></script> <script src="../js/exif.js"></script> <script src="../js/cropper.min.js"></script> <script src="../js/app.min.js"></script> <script> (function(c) { var Cro = function() {} c.extend(Cro.prototype, { orientation: null, urldata: null, view: null, num: 0, sbx: null, sby: null, n: 0, onReady: function() { var that = this; mui.init(); that.bindEvent(); that.view = plus.webview.currentWebview(); var img = document.getElementById("im_exif"); img.src = that.view.path; img.addEventListener("load", function() { //exif调整图片的横竖 EXIF.getData(this, function() { var orientation = EXIF.getAllTags(this).Orientation; $("#im").attr("src", that.loadcopyImg(img, orientation)); document.getElementById("cropper-example-1").classList.remove("mui-hidden"); //显示裁剪区域 that.cropperImg(); }); }) }, cropperImg: function() { var that = this; $('#cropper-example-1 > img').cropper({ aspectRatio: 1 / 1, autoCropArea: 1, strict: true, background: false, guides: false, highlight: false, dragCrop: false, movable: false, resizable: false, crop: function(data) { that.urldata = that.base64(data); } }); }, loadcopyImg: function(img, opt) { var that = this; var canvas = document.createElement("canvas"); var square = 500; var imageWidth, imageHeight; if(img.width > img.height) { imageHeight = square; imageWidth = Math.round(square * img.width / img.height); } else { imageHeight = square; //this.width; imageWidth = Math.round(square * img.width / img.height); } canvas.height = imageHeight; canvas.width = imageWidth; if(opt == 6) { that.num = 90; } else if(opt == 3) { that.num = 180; } else if(opt == 8) { that.num = 270; } if(that.num == 360) { that.num = 0; } var ctx = canvas.getContext("2d"); ctx.translate(imageWidth / 2, imageHeight / 2); ctx.rotate(that.num * Math.PI / 180); ctx.translate(-imageWidth / 2, -imageHeight / 2); ctx.drawImage(img, 0, 0, imageWidth, imageHeight); var dataURL = canvas.toDataURL("image/jpeg", 1); return dataURL; }, bindEvent: function() { var that = this; document.getElementById("quxiao").addEventListener("tap", function() { mui.back(); //取消就直接返回 }); document.getElementById("xuanqu").addEventListener("tap", function() { var preView = plus.webview.getWebviewById('plus/headinfo.html'); //触发上一个页面刷新图片事件 mui.fire(preView,'updateHeadImg',{ img_path:that.urldata }); mui.back(); }); }, base64: function(data) { var that = this; var img = document.getElementById("im"); var canvas = document.createElement("canvas"); //像素 canvas.height = 500; canvas.width = 500; var bx = data.x; var by = data.y; var ctx = canvas.getContext("2d"); ctx.drawImage(img, bx, by, data.width, data.height, 0, 0, 500, 500); var dataURL = canvas.toDataURL("image/jpeg", 1.0); //第二个参数是质量 return dataURL; } }); var cro = new Cro(); c.plusReady(function() { cro.onReady(); }) })(mui) </script> </body> </html>
补充问题： （由 
sunleon{7.gif)
这位朋友提供 ）
问题：ios设备上图片上传进行剪裁 出现黑屏问题，
原因： 因为IOS上，获取的图片是个路径，所以没有关闭黑屏
解决办法： 需要通过FileReader将图片读取成base64
完整版本可以参考这个：
兼容ios Android的版本： https://www.sunleon.cn/frontend/333.html