MUI 图片上传剪切预览，可选（拍照+系统相册）

整合网上的例子。。麻蛋。没跑通。。没办法。自己就拿他们的例子完善了一下。。已经可以使用了！

准备工作：这几个文件要引入。特别是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 这位朋友提供）

问题：ios设备上图片上传进行剪裁出现黑屏问题，

原因：因为IOS上，获取的图片是个路径，所以没有关闭黑屏

解决办法：需要通过FileReader将图片读取成base64

完整版本可以参考这个：

兼容ios Android的版本： https://www.sunleon.cn/frontend/333.html

posted @ 2017-03-25 17:13 依然范儿特西阅读(8781) 评论(7) 编辑收藏举报

刷新页面返回顶部

依然范儿特西

代码改变世界QQ群：453011886

MUI 图片上传剪切预览，可选（拍照+系统相册）

公告