Amoy2
/
sr-iHealthApp


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288
							<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <meta name="author" content="yihu.com" />
        <meta name="format-detection" content="telephone=no" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
        <meta name="apple-mobile-web-app-capable" content="yes" />
        <meta name="apple-mobile-web-app-status-bar-style" content="black" />
        <title>剪切图片</title>
        <link rel="stylesheet" type="text/css" href="../../../common/cross/css/cross.css"/>
        <link rel="stylesheet" type="text/css" href="../../../common/cross/css/cross.ui.css"/>
        <style type="text/css">
            .clip-img{
                position: absolute;
                left: 0;
                right: 0;
                bottom: 0;
                top: 0;
                width: 100%;
                height: 100%;
                margin: 0;
            }
            .clip-img img{
                position: absolute;
                width: auto;
                height: auto;
                max-width: 100%;
                max-height: 100%;
            }
            #clip{
                position: absolute;
                z-index: 100;
                /*border: 1px solid #ccc;*/
                outline: rgba(0, 0, 0, 0.8) solid 10000px;
            }
            nav{height: 40px;}
            nav > div:first-child{
                border-right: 1px solid #cbcbcb;
            }
            .bgc-000{
                background-color: #000;
            }
            .c-a8 {
                color: #a8a8a8;
            }
        </style>
    </head>
    <body class="bgc-000">
        <div class="h45">
            <div class="demo-comtop">
                <a class="mui-action-back"></a>
                <h1 class="c-f18">我的资料</h1>
                <div class="header-link" id="save">
                    <a class="link" >完成</a>
                </div>
            </div>
        </div>
        <div class="mui-content">
            <div class="clip-img" id="clipContent">
                <canvas id="clipImg" width="" height="" style="position: absolute"></canvas>
                <div id="clip">
                </div>
            </div>
        </div>
        <nav>
            <div id="reduce" class="c-a8">
                <img src="../images/suoxiao_icon.png" width="18" class="mr10">
                <span class="c-f16 ">缩小</span>
            </div>
            <div id="enlarge" class="c-a8">
                <img src="../images/fangda_icon.png" width="18" class="mr10">
                <span class="c-f16 ">放大</span>
            </div>
        </nav>
        <script src="../../../js/jquery/2.1.3/jquery.js"></script>
        <script src="../../../js/mui.min.js"></script>
        <script type="text/javascript" src="../../../js/common_http.js"></script>
        <script src="../js/upload_photo_modify.js" type="text/javascript" charset="utf-8"></script>
        <script src="../../js/common.js" type="text/javascript" charset="utf-8"></script>
        <script src="../../../js/app.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
            var srcUrl, imgName;
            mui.init();
            mui.plusReady(function(){
                var self = plus.webview.currentWebview();
                srcUrl = self.srcUrl;
                imgName = self.imgName;
                
//              $("#img").attr('src', srcUrl);
//              console.log($("#img").width()+'  '+ $("#img").height());
//              Clip.changeBase(0);
//              bindEvent();
                Clip.init();
            });
            
            var windowHeight = document.documentElement.clientHeight,
                windowWidth = document.documentElement.clientWidth,
                headerHeight = $(".h45").height(),
                footerHeight = $("nav").height(),
                contentHeight = windowHeight - headerHeight - footerHeight,
                imgHeight, imgWidth;
            var canvas = document.getElementById("clipImg");
            
            var Clip = {
                size: 200, //表示正方形的边长，乘上一个基数就是当前的像素值
                range: {}, //用来控制正方形的边界值
                topCss: (windowHeight - this.size) /2,
                leftCss: ($('body').width() - this.size)/2,
                touchX: 0,
                touchY: 0,
                timer: null,
                init: function(){
                    //等比例缩放图片(如果图片宽高都比容器小，则绘制的图片宽高 = 原图片的宽高。)
                    //如果图片的宽度或者高度比容器大，则宽度或者高度 = 容器的宽度或者高度，另一高度或者宽度则等比例缩放
                    var cxt = canvas.getContext('2d');
                    var img = new Image();
                    img.src = srcUrl;
                    
                    img.onload = function(){
                        if ( img.width < windowWidth && img.height < contentHeight) {
                          imgWidth = img.width;
                          imgHeight = img.height;
                      
                        } else {
                          var pWidth = img.width / (img.height / contentHeight);
                          var pHeight = img.height / (img.width / windowWidth);
                          imgWidth = pWidth > windowWidth ? windowWidth : pWidth;
                          imgHeight = pHeight > contentHeight ? contentHeight : pHeight;
                        }
                        
                        canvas.height = imgHeight;
                        canvas.width = imgWidth;
                        canvas.style.left = (windowWidth - imgWidth) / 2 + 'px';;
                        canvas.style.top = (contentHeight - imgHeight) / 2 + headerHeight + 'px';
                        
                        cxt.drawImage(img,0,0,imgWidth,imgHeight);
                        
                        Clip.changeBase(0);
                        bindEvent();
                    }
                },
                changeBase: function(index){
                    //这个函数用来改变正方形的边长
                    this.size += index*5;
                    
                    if(this.size > imgHeight || this.size > imgWidth){
                        this.size = imgHeight>imgWidth ? imgWidth : imgHeight;
                    }
                    if((this.size + this.leftCss) > (parseFloat(canvas.style.left) + imgWidth)){
                        var left = (this.size + this.leftCss) - (parseFloat(canvas.style.left) + imgWidth);
                        this.leftCss = this.leftCss - left;
                    }
                    
                    if((this.size + this.topCss) > (parseFloat(canvas.style.top) + imgHeight)){
                        var top = (this.size + this.topCss) - (parseFloat(canvas.style.top) + imgHeight);
                        this.topCss = this.topCss - top;
                    }
                    
                    $("#clip").css({
                        height : this.size+'px',
                        width : this.size + 'px',
                        lineHeight: this.size+'px'
                    });
                    
                    this.changeRange();
                },
                changeRange: function(){
                    //这个方法用来计算初始top，left以及边界值。相对clipContent而言
                    if(isNaN(this.topCss)) {
                        this.topCss = (contentHeight - this.size) / 2 + headerHeight;
                    }
                    if(isNaN(this.leftCss)) {
                        this.leftCss = (windowWidth - this.size) / 2;
                    }
                    this.changeClipStyle(this.leftCss, this.topCss);
            
                    //极限值，需控制不超出图片区域
                    var minTop = (contentHeight - imgHeight)/2 + headerHeight;
                    var maxTop = (contentHeight - imgHeight)/2+ headerHeight+ imgHeight - this.size;
            
                    var minLeft = (windowWidth - imgWidth)/2;
                    var maxLeft = (windowWidth - imgWidth)/2 + imgWidth - this.size;
                    this.range = {
                        minTop: minTop,
                        maxTop: maxTop,
                        minLeft: minLeft,
                        maxLeft: maxLeft
                    };
                },
                //设置新的样式，并改变当前的top和left值
                changeClipStyle: function(leftCss, topCss){
                    $('#clip').css({
                        left: leftCss + 'px',
                        top: topCss + 'px'
                    });
                    Clip.leftCss = leftCss;
                    Clip.topCss = topCss;
                }
            };
            
            function bindEvent(){
                var clip = document.getElementById('clip');
            
                clip.addEventListener('touchstart', function (event) {
                    event.preventDefault();
                    var x = event.touches ? event.touches[0].clientX : event.screenX;
                    var y = event.touches ? event.touches[0].clientY : event.screenY; 
                    
                    Clip.touchX = x;
                    Clip.touchY = y;
                });
                clip.addEventListener('touchmove', function(event){
                    if(Clip.timer != null){
                        return;
                    }
                    Clip.timer = setTimeout(function(){
                        var x = event.touches ? event.touches[0].clientX : event.screenX;
                        var y = event.touches ? event.touches[0].clientY : event.screenY;
                        
                        var disX = x - Clip.touchX;
                        var disY = y - Clip.touchY;
                        
                        var nowLeft = Clip.leftCss + disX;
                        var nowTop = Clip.topCss + disY;
                        
                        if(nowLeft < Clip.range.minLeft){
                            nowLeft = Clip.range.minLeft;
                        }
                        if(nowLeft > Clip.range.maxLeft){
                            nowLeft = Clip.range.maxLeft;
                        }
                        
                        if(nowTop < Clip.range.minTop){
                            nowTop = Clip.range.minTop;
                        }
                        if(nowTop > Clip.range.maxTop){
                            nowTop = Clip.range.maxTop;
                        }
                        
                        Clip.changeClipStyle(nowLeft, nowTop);
                        
                        Clip.touchX = x;
                        Clip.touchY = y;
                        Clip.timer = null;
                    }, 20);
                });
                
                //bind event
                mui('body').on('tap', '#enlarge', function(e){
                   Clip.changeBase(1); 
                });
                
                mui('body').on('tap', '#reduce', function(e){
                    Clip.changeBase(-1);
                });
                
                mui('body').on('tap', '#save', function(e){
//                  console.log('save picture srcUrl = '+srcUrl);
//                  console.log('file name = '+imgName);
//                    获取width和height的百分比
                    var widthPix = ((Clip.size / imgWidth).toFixed(2) * 100).toFixed(2);
                    var heightPix = ((Clip.size / imgHeight).toFixed(2) * 100).toFixed(2);
                    
                    var topPix = (((Clip.topCss - Clip.range.minTop) / imgHeight).toFixed(2) * 100).toFixed(2);
                    var leftPix = (((Clip.leftCss - Clip.range.minLeft) / imgWidth).toFixed(2) * 100).toFixed(2);
                    
                    var backToPre = function(){
                        var old_back  =  mui.back;
                        mui.back=function(){
                            var gerenziliaoview =  plus.webview.getWebviewById("gerenziliao");
                            if(gerenziliaoview){
                                mui.fire(gerenziliaoview,"getDocInfo");
                            }
                            old_back(); 
                        };
                    
                        mui.back();
                    };
                    
                    compressImg(topPix, leftPix, widthPix, heightPix, backToPre);
                  
                });
            }
            
        </script>
    </body>
</html>