为什么用mui.previewimage.js上传的图片显示的是旋转了90度的呢？代码如下，哪里出了问题呢？

分类：MUI

<html>

<head>  
    <meta charset="utf-8">  
    <title>Hello MUI</title>  
    <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">  
    <meta name="apple-mobile-web-app-capable" content="yes">  
    <meta name="apple-mobile-web-app-status-bar-style" content="black">  
    <!--标准mui.css-->  
    <link rel="stylesheet" href="css/mui.min.css">  
    <!--App自定义的css-->  
    <style type="text/css">  
        .mui-preview-image.mui-fullscreen {  
            position: fixed;  
            z-index: 20;  
            background-color: #000;  
        }  
        .mui-preview-header,  
        .mui-preview-footer {  
            position: absolute;  
            width: 100%;  
            left: 0;  
            z-index: 10;  
        }  
        .mui-preview-header {  
            height: 44px;  
            top: 0;  
        }  
        .mui-preview-footer {  
            height: 50px;  
            bottom: 0px;  
        }  
        .mui-preview-header .mui-preview-indicator {  
            display: block;  
            line-height: 25px;  
            color: #fff;  
            text-align: center;  
            margin: 15px auto 4;  
            width: 70px;  
            background-color: rgba(0, 0, 0, 0.4);  
            border-radius: 12px;  
            font-size: 16px;  
        }  
        .mui-preview-image {  
            display: none;  
            -webkit-animation-duration: 0.5s;  
            animation-duration: 0.5s;  
            -webkit-animation-fill-mode: both;  
            animation-fill-mode: both;  
        }  
        .mui-preview-image.mui-preview-in {  
            -webkit-animation-name: fadeIn;  
            animation-name: fadeIn;  
        }  
        .mui-preview-image.mui-preview-out {  
            background: none;  
            -webkit-animation-name: fadeOut;  
            animation-name: fadeOut;  
        }  
        .mui-preview-image.mui-preview-out .mui-preview-header,  
        .mui-preview-image.mui-preview-out .mui-preview-footer {  
            display: none;  
        }  
        .mui-zoom-scroller {  
            position: absolute;  
            display: -webkit-box;  
            display: -webkit-flex;  
            display: flex;  
            -webkit-box-align: center;  
            -webkit-align-items: center;  
            align-items: center;  
            -webkit-box-pack: center;  
            -webkit-justify-content: center;  
            justify-content: center;  
            left: 0;  
            right: 0;  
            bottom: 0;  
            top: 0;  
            width: 100%;  
            height: 100%;  
            margin: 0;  
            -webkit-backface-visibility: hidden;  
        }  
        .mui-zoom {  
            -webkit-transform-style: preserve-3d;  
            transform-style: preserve-3d;  
        }  
        .mui-slider .mui-slider-group .mui-slider-item img {  
            width: auto;  
            height: auto;  
            max-width: 100%;  
            max-height: 100%;  
        }  
        .mui-android-4-1 .mui-slider .mui-slider-group .mui-slider-item img {  
            width: 100%;  
        }  
        .mui-android-4-1 .mui-slider.mui-preview-image .mui-slider-group .mui-slider-item {  
            display: inline-table;  
        }  
        .mui-android-4-1 .mui-slider.mui-preview-image .mui-zoom-scroller img {  
            display: table-cell;  
            vertical-align: middle;  
        }  
        .mui-preview-loading {  
            position: absolute;  
            width: 100%;  
            height: 100%;  
            top: 0;  
            left: 0;  
            display: none;  
        }  
        .mui-preview-loading.mui-active {  
            display: block;  
        }  
        .mui-preview-loading .mui-spinner-white {  
            position: absolute;  
            top: 50%;  
            left: 50%;  
            margin-left: -25px;  
            margin-top: -25px;  
            height: 50px;  
            width: 50px;  
        }  
        .mui-preview-image img.mui-transitioning {  
            -webkit-transition: -webkit-transform 0.5s ease, opacity 0.5s ease;  
            transition: transform 0.5s ease, opacity 0.5s ease;  
        }  
        @-webkit-keyframes fadeIn {  
            0% {  
                opacity: 0;  
            }  
            100% {  
                opacity: 1;  
            }  
        }  
        @keyframes fadeIn {  
            0% {  
                opacity: 0;  
            }  
            100% {  
                opacity: 1;  
            }  
        }  
        @-webkit-keyframes fadeOut {  
            0% {  
                opacity: 1;  
            }  
            100% {  
                opacity: 0;  
            }  
        }  
        @keyframes fadeOut {  
            0% {  
                opacity: 1;  
            }  
            100% {  
                opacity: 0;  
            }  
        }  
        p img {  
            max-width: 100%;  
            height: auto;  
        }  
    </style>  

</head>  

<body>  
    <header class="mui-bar mui-bar-nav">  
        <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>  
        <h1 class="mui-title">image viewer（图片预览）</h1>  
    </header>  
    <div class="mui-content">  
        <div class="mui-content-padded" id="imgContainer">  
            <p>这是图片放大预览示例，点击如下图片体验全屏预览功能</p>  
            <p>  
                <img src="images/1-hair.jpg" data-preview-src="" data-preview-group="1" onload="onReady(this)"/>  
            </p>  
            <p>图片全屏后，双击或双指缩放均可对图片进行放大、缩小操作，左右滑动可查看同组(data-preview-group相同的图片为一组)其它图片，点击会关闭预览</p>  
            <p>  
                <img src="images/1-hair.jpg" data-preview-src="" data-preview-group="1" onload="onReady(this)"/>  
            </p>  
            <p>第三张图片，纯粹为了占位： </p>  
            <p>  
                <img src="images/1-hair.jpg" data-preview-src="" data-preview-group="1" onload="onReady(this)"/>  
            </p>  
        </div>  
        <img src="images/iconfont-tianjia.png" id="click"></p>     
    </div>  
</body>  
<script src="js/mui.min.js"></script>  
<script src="js/mui.zoom.js"></script>  
<script src="js/mui.previewimage.js"></script>  
<script>  
    var imageRenderTemplate = '<p><img src="{0}" data-preview-src="" data-preview-group="1" onload="onReady(this)"/></p>';  
    var imgContainer = document.getElementById("imgContainer");

// 点击图片容器
imgContainer.addEventListener("tap",pickPhotos);

    document.getElementById("click").addEventListener("tap",pickPhotos)  

    String.prototype.fillData = function(key, value) {  
        return this.replace(new RegExp("\\{" + key + "\\}", "g"), value);  
    }  
    mui.previewImage();

//刚开始加载的时候就把这些图片变成小图
function onReady(item){
var scaleX = 60 / item.width;
var scaleY = 60 / item.height;
var scale = Math.max(scaleX , scaleY );

            item.width = Math.ceil( item.width * scale);  

        }  

    function pickPhotos(item){  
        // 这是H5的弹出系统选择按钮框  
        var btns = [{title:"拍照"},{title:"从相册选择"}];  
        plus.nativeUI.actionSheet({cancel:"取消",buttons:btns}, function(e){  
               if(e.index==0){return;}//取消  
               else if(e.index==1){//拍照  
                    getImage();  
                    }  
                  else{  //相册选取  
                   galleryImgs();  
                   }  
           });  
    }  

    //拍照  
        function getImage() {  
            var cmr = plus.camera.getCamera();  
            cmr.captureImage( function (p) {  
                plus.io.resolveLocalFileSystemURL( p, function ( entry ) {      
                    var localurl = entry.toLocalURL();  
                    addImage(localurl);  
                });  
            });  
        }  
        //相册选取  
        function galleryImgs(){  
            plus.gallery.pick( function(e){  
               for(var i in e.files){  
                    addImage(e.files[i]);  
                }  
            }, function ( e ) {  
            },{filter:"image",multiple:true});  
        }

//把拍照或者从相册选择好的图片放在这个图片的最后面
function addImage(url){
var render = imageRenderTemplate;
render = render.fillData(0,url);
imgContainer.innerHTML += render;
}
</script>

</html>

2016-10-25 16:41 负责人:无分享