微名片主頁代碼demo

原創 于先生2020 2020-07-05 19:48

<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
 <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %> 
<!DOCTYPE html>
<%@ include file="../common/basePath.jsp" %>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
    <title>${title }</title>
    <link rel="stylesheet" href="../../app/css/layer.css" />
    <link rel="stylesheet" href="../../app/css/index3.css">
    <link rel="stylesheet" href="../../app/js/Mobiscroll/css/mobiscroll.custom-3.0.0-beta6.min.css" />
    <link rel="stylesheet" href="../../app/css/bootstrap.min.css">
    <script type="text/javascript" src="../../app/js/jquery-2.1.4.js"></script>
    <script type="text/javascript" src="../../app/js/layer/layer.js"></script>
    <script type="text/javascript" src="../../app/js/exif.js"></script>
    
    <link rel="stylesheet prefetch" href="../../app/js/photoSwipe/photoswipe.css">
    <link rel="stylesheet prefetch" href="../../app/js/photoSwipe/default-skin.css">
    
    <script src="../../app/js/photoSwipe/photoswipe.min.js"></script>
    <script src="../../app/js/photoSwipe/photoswipe-ui-default.min.js"></script>
    
    <script type="text/javascript">
        var custid = '';
        var openid = '';
        var accountid = '';
        var modifyFlag = '';
    
        //圖片404重載
        function reloadimg(obj){
            $(obj).attr('src','../../app/img/404.png');
        }
        function reloadimg2(obj){
            $(obj).attr('src','../../app/img/uploadimg.png');
        }
        $(function(){
            openid = '${openid}';
            custid = '${custid}';
            accountid = '${accountid}';
            modifyFlag = '${modifyFlag}';
            
        });
        
        function tobindpage(){
            if(modifyFlag == 'true'){
                window.location.href = basepath+'/controller/index/renderbind?accountid='+accountid+'&custid='+custid+'&type=0';
            }
        }
        var getUrlParam = function(name){
            var reg = RegExp("(^|&)"+name+"=([^&]*)(&|$)");
            var r = window.location.search.substr(1).match(reg);
            if(r!=null) return decodeURI(r[2]);
            return null;
        }
    </script>
    <style>
    .imgContainer{
        position:absolute;
        width:100%;
        height:100%;
        top:0;
        z-index:100;
        background-color:rgba(0,0,0,0.9);
        display:none;
    }
    .imgClass{
        position:absolute;
        width:100%;
        height:auto;
        top:50%;
        transform:translateY(-50%)
    }
    .layui-layer {
            /* top: 150px !important; */
           }
        .layui-layer.layui-layer-page.layui-layer-tab{
            height:auto !important;
        }
        .layui-layer-content ul li:nth-child(1){
            padding:5px;
        }
        .layui-layer-content ul li:nth-child(2){
            padding:15px;
        }
        .showcode2{
            display:none !important;
        }
        .layui-layer-tab .layui-layer-title span {
            min-width: 60px;
            padding: 0 8px;
        }
        .layui-layer-setwin {
            position: absolute;
            right: 6px;
            top: 15px;
            font-size: 0;
            line-height: initial;
        }
        .layui-layer-setwin .layui-layer-close2 {
            position: absolute;
            right: -16px;
            top: -24px;
            width: 30px;
            height: 30px;
            margin-left: 0;
            background-position: -149px -31px;
            _display: none;
        }
        html,body{
            width: 100%;
            height: 100%;
            font-size:16px !important;
            overflow: hidden;
            position: relative;
        }
    </style>
</head>
<body>
    <div class="container-fluid">
        <div class="row" style="margin-top:10px ">
            <div class="col-xs-5" id='logo'>
                <img src="../../app/img/ytkd.png">
            </div>
        </div>
        <div class="row">
            <form id="avatarform" enctype="multipart/form-data" class="col-xs-4 col-xs-offset-4">
                <div class="userimginfo" style="position:relative">
                    <div class="imgdiv">
                        <img id="avatarimg" src="${sysuser.avatar}" οnerrοr="reloadimg2(this)" />
                        
                        <input type="file" accept="image/*" id="avatar" name="avatar" οnchange="uploadimg('avatarform')"/>
                    </div>
                    <img id="uploadicon" src="../../app/img/camera.png" />
                </div>
                <input type="hidden" id="uptype" name="uptype" value="custimg"/>
                <input type="hidden" id="custid" name="custid" value="${custid }"/>
                <input type="hidden" id="filename" name="filename" value=""/>
            </form>
            <div class="col-xs-12">
                <h1 class="text-center " style="margin:8px 0;font-size:30px">${sysuser.username }</h3>
            </div>
            <div class="col-xs-12">
                <h5 class="text-center " style="margin:0">
                    <span>${sysuser.orgname }</span>&nbsp;&nbsp;<span>${sysuser.position }</span>
                </h5>
            </div>
            <div class="col-xs-8 col-xs-offset-2" style="margin-top: 10px">
                <div class="col-xs-4 col-xs-offset-2" οnclick="showcode2()">
                    <img src="../../app/img/2-4.png">
                    <span class="red">二維碼</span>
                </div>
                <div class="col-xs-4">
                    <a href="tel://${sysuser.tel }">
                        <img src="../../app/img/2-2.png">
                        <span class="red">一鍵撥號</span>
                    </a>        
                </div>
            </div>
            <div class="codediv2">
                <div id="code1" class="code heartBeat" οnclick="showcode()">
                    <img src="../../app/img/2-4_new.png" />
                </div>                
            </div>
            <div class="col-xs-12" style="padding: 0;position: absolute;bottom: -20px;z-index:1;">
                <div>
                    <img src="../../app/img/2-1.png">
                </div>
                
                <div>
                       <c:forEach items="${wmpColumnList}" var="Shop">
                    <div class="items">
                        <div>
                            <c:if test="${Shop.columnUrl != ''&&Shop.columnUrl != null}">
                                
                                 <!-- 貸款預約拼accountid和custid 和kdway -->
                                <c:if test="${Shop.columnCode == 'WMPCT004'}">
                                     <a href='${Shop.columnUrl }?accountid=${accountid}&custid=${custid}&kdway=7'> 
                                        <img src="../../app/img/${Shop.columnCode}.png">
                                        <span>${Shop.columnName }</span>
                                    </a>  
                                </c:if>
                                <c:if test="${Shop.columnCode == 'WMPCT005'}">
                                    <a href='${Shop.columnUrl }&custid=${custid}'> 
                                        <img src="../../app/img/${Shop.columnCode}.png">
                                        <span>${Shop.columnName }</span>
                                    </a>  
                                </c:if>
                                <c:if test="${Shop.columnCode != 'WMPCT005' && Shop.columnCode != 'WMPCT004'}">
                                    <a href='${Shop.columnUrl }'> 
                                        <img src="../../app/img/${Shop.columnCode}.png">
                                        <span>${Shop.columnName }</span>
                                    </a>  
                                </c:if>                                    
                            
                            </c:if> 
                            <c:if test="${Shop.columnUrl == '' || Shop.columnUrl == null}">
                                <div οnclick='layerOpen("${Shop.columnPic }")'> 
                                    <img src="../../app/img/${Shop.columnCode}.png">
                                    <span>${Shop.columnName }</span>
                                </div>
                            </c:if>
                            
                        </div>
                    </div>
                </c:forEach>
                </div>
            </div>
        </div>
    </div>
    <!--
            作者：offline
            時間：2018-02-27
            描述：音樂開關
        -->
        <div class="symboldiv" οnclick="startorstopaudio()">
            <span class="iconnote fade1" id="fade1"></span>
            <span class="iconnote fade2" id="fade2"></span>
            <span class="iconnote fade3" id="fade3"></span>
            <span class="iconnote fade4" id="fade4"></span>
            <audio id="audio" paused="true" loop="loop" src="../../app/css/backmusic.mp3"></audio>
            <div id="dismusic" class="dismusic">\</div>
        </div>
    <div class="pswp" tabindex="-1" role="dialog" aria-hidden="true">

        <div class="pswp__bg"></div>
    
        <div class="pswp__scroll-wrap">
    
            <div class="pswp__container">
                <div class="pswp__item"></div>
                <div class="pswp__item"></div>
                <div class="pswp__item"></div>
            </div>
    
            <!-- Default (PhotoSwipeUI_Default) interface on top of sliding area. Can be changed. -->
            <div class="pswp__ui pswp__ui--hidden">
    
                <div class="pswp__top-bar">
    
                    <!--  Controls are self-explanatory. Order can be changed. -->
    
                    <div class="pswp__counter"></div>
    
                    <!--關閉窗口-->
                    <button class="pswp__button pswp__button--close" title="Close (Esc)"></button>
    
                    <!-- Preloader demo http://codepen.io/dimsemenov/pen/yyBWoR -->
                    <!-- element will get class pswp__preloader--active when preloader is running -->
                    <div class="pswp__preloader">
                        <div class="pswp__preloader__icn">
                          <div class="pswp__preloader__cut">
                            <div class="pswp__preloader__donut"></div>
                          </div>
                        </div>
                    </div>
                </div>
    
                <div class="pswp__share-modal pswp__share-modal--hidden pswp__single-tap">
                    <div class="pswp__share-tooltip"></div> 
                </div>
    
                <button class="pswp__button pswp__button--arrow--left" title="Previous (arrow left)">
                </button>
    
                <button class="pswp__button pswp__button--arrow--right" title="Next (arrow right)">
                </button>
    
                <div class="pswp__caption">
                    <div class="pswp__caption__center"></div>
                </div>
    
            </div>
    
        </div>
    </div>
    <div id="showcode2" class="showcode2" style="padding:20px;">
        <div style="height:60px;">
            <div style="width:60px;height:60px;float:left;overflow:hidden;">
                <img src="${sysuser.avatar}" οnerrοr="reloadimg2(this)" style="width:100%;position: relative;top: 50%;transform: translateY(-50%);"/>
            </div>
            <div style="float:left;padding-left:10px">
                <p>${sysuser.username}</p>
                <p>${sysuser.tel}</p>
            </div>
        </div>
        <div>
            <img src="/wechat/WECHAT/controller/index/generatecode?accountid=${accountid}&openid=${custid}&codetype=0">
        </div>
        <div>
            <p id="logo" style="position:relative;text-align:center"><img src="" style="width:50%"></p>
        </div>
    </div> 
    <script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>
    <script>
var openPhotoSwipe = function(e) {
    console.log(e);
    
    var pswpElement = document.querySelectorAll('.pswp')[0];

    // build items array
    var items = e;
    
    

    // define options (if needed)
    var options = {
             // history & focus options are disabled on CodePen        
        history: false,
        focus: false,

        showAnimationDuration: 0,
        hideAnimationDuration: 0

    };

    var gallery = new PhotoSwipe( pswpElement, PhotoSwipeUI_Default, items, options);
    console.log(items)
    gallery.init();
    layer.closeAll('loading');
};
function layerOpen(e){
    console.log(e);
    layer.load(1);
    var arr = e.split(',');
    var arr2 = []
    var t=0;
    for(let i =0;i<arr.length;i++){
        let img_url = '../../upload/lookimg.do?path='+arr[i];
          
        // 創建對象
        let img = new Image();
          
        // 改變圖片的src
        img.src = img_url;
          
        // 加載完成執行
        if(img.complete){
             // 打印
             console.log('from:complete : width:'+img.width+',height:'+img.height);
             arr2.push({
                 src:img.src,
                 w:img.width,
                 h:img.height
             })
             console.log(i)
             t= t+1
             console.log(t)
             if(t == arr.length){
                    openPhotoSwipe(arr2)
                }    
            }else{
             // 加載完成執行
             img.onload = function(){
             // 打印
             console.log('from:onload : width:'+img.width+',height:'+img.height);
             arr2.push({
                 src:img.src,
                 w:img.width,
                 h:img.height
             })
             console.log(i)
             t= t+1
             console.log(t)
            if(t == arr.length){
                openPhotoSwipe(arr2)
            }          
            };
        }        
    }
}
</script>
     <script>
    
    //銀行網點logo判斷
    function bankType(){
        $("#logo img").attr("src","../../app/img/ytkd.png");
    }
    bankType();
    </script>
    <script>
 // 判斷是否允許用戶上傳頭像
     if(getUrlParam("modifyFlag") != null && getUrlParam("modifyFlag") == 'true'){
         //允許用戶上傳頭像
        
    }else{
        //不允許上傳
         $('#uploadicon').hide()
        $("#avatar").hide()
    }
    wx.config({
        debug: false, // 開啓調試模式,調用的所有api的返回值會在客戶端alert出來，若要查看傳入的參數，可以在pc端打開，參數信息會通過log打出，僅在pc端時纔會打印。
        appId: '${appId}', // 必填，公衆號的唯一標識
        timestamp: '${timestamp}', // 必填，生成簽名的時間戳
        nonceStr: '${nonceStr}', // 必填，生成簽名的隨機串
        signature: '${signature}',// 必填，簽名
        jsApiList: [
                    'onMenuShareTimeline',
                    'onMenuShareAppMessage',
                    'onMenuShareQQ',
                    'onMenuShareWeibo',
                    'onMenuShareQZone'
                    ] // 必填，需要使用的JS接口列表
    });
    
    wx.ready(function(){
        // config信息驗證後會執行ready方法，所有接口調用都必須在config接口獲得結果之後，config是一個客戶端的異步操作，所以如果需要在頁面加載時就調用相關接口，則須把相關接口放在ready函數中調用來確保正確執行。對於用戶觸發時才調用的接口，則可以直接調用，不需要放在ready函數中。
        
        //分享給朋友
        wx.onMenuShareAppMessage({
            title: '${title}', // 分享標題
            desc: '${desc}', // 分享描述
            link: '${link}', // 分享鏈接，該鏈接域名或路徑必須與當前頁面對應的公衆號JS安全域名一致
            imgUrl: '${imgUrl}', // 分享圖標
            type: 'link', // 分享類型,music、video或link，不填默認爲link
            dataUrl: '', // 如果type是music或video，則要提供數據鏈接，默認爲空
            success: function () {
                 // 用戶確認分享後執行的回調函數
                 wmpDataOper(); 
            },
            cancel: function () {
            // 用戶取消分享後執行的回調函數
            }
        });
        
        //分享到朋友圈
        wx.onMenuShareTimeline({
            title: '${title}  ${desc}', // 分享標題
            link: '${link}', // 分享鏈接，該鏈接域名或路徑必須與當前頁面對應的公衆號JS安全域名一致
            imgUrl: '${imgUrl}', // 分享圖標
            success: function () {
                // 用戶確認分享後執行的回調函數
                wmpDataOper(); 
            },
            cancel: function () {
                // 用戶取消分享後執行的回調函數
            }
        });
        
        //分享到QQ
        wx.onMenuShareQQ({
            title: '${title}', // 分享標題
            desc: '${desc}', // 分享描述
            link: '${link}', // 分享鏈接
            imgUrl: '${imgUrl}', // 分享圖標
            success: function () {
            // 用戶確認分享後執行的回調函數
                wmpDataOper(); 
            },
            cancel: function () {
            // 用戶取消分享後執行的回調函數
            }
        });
    });
    
    wx.error(function(res){
        if(res.errMsg.indexOf('require subscribe') != -1){
            layer.msg('請先關注該公衆號！')
        }
        // alert('失敗');
        // config信息驗證失敗會執行error函數，如簽名過期導致驗證失敗，具體錯誤信息可以打開config的debug模式查看，也可以在返回的res參數中查看，對於SPA可以在這裏更新簽名。
    });
    //背景音樂播放/暫停
    function startorstopaudio(){
        var audio = document.getElementById('audio');
        if(audio.paused){
            audio.play();
            document.getElementById('dismusic').style.display = 'none';
            document.getElementById('fade1').style.display = 'block';
            document.getElementById('fade2').style.display = 'block';
            document.getElementById('fade3').style.display = 'block';
            document.getElementById('fade4').style.display = 'block';
        }
        else{
            audio.pause();
            document.getElementById('dismusic').style.display = 'block';
            document.getElementById('fade1').style.display = 'none';
            document.getElementById('fade2').style.display = 'none';
            document.getElementById('fade3').style.display = 'none';
            document.getElementById('fade4').style.display = 'none';
        }
    }
    function showcode(){
        layer.tab({
              closeBtn: 2,
              area: ['300px', '300px'],
              tab: [{
                title: '申貸二維碼', 
                content: '<img src="'+basepath+'/WECHAT/controller/index/generatecode?accountid=${accountid}&openid=${custid}&codetype=0" οnerrοr="reloadimg(this)" />'
              }, {
                title: '名片二維碼', 
                content: '<img src="'+basepath+'/WECHAT/controller/index/generatecode?accountid=${accountid}&openid=${custid}&codetype=1" οnerrοr="reloadimg(this)" />'
              },/*  {
                title: '保存聯繫人', 
                content: '<img src="/wmp/controller/index/generatecode?accountid=${accountid}&openid=${custid}&codetype=2" οnerrοr="reloadimg(this)" />'
              } */ 
              {
                     title: '公衆號二維碼', 
                     content: '<img src=${erqCodeUrl} οnerrοr="reloadimg(this)" />'
                      } 
              ]
            });
    }
    function showcode2(){
        $("#showcode2").removeClass("showcode2")
        layer.open({
            type:"1",
            title:false,
              area: ['90%', 'auto'],
              content:$("#showcode2"),
              cancel: function(){
                  $("#showcode2").addClass("showcode2")
                  }
            });
    }
    //默認音樂顯示樣式調整
    $(function(){
        var audio = document.getElementById('audio');
        if(audio.paused){
            document.getElementById('dismusic').style.display = 'block';
            document.getElementById('fade1').style.display = 'none';
            document.getElementById('fade2').style.display = 'none';
            document.getElementById('fade3').style.display = 'none';
            document.getElementById('fade4').style.display = 'none';
        }
        else{
            document.getElementById('dismusic').style.display = 'none';
            document.getElementById('fade1').style.display = 'block';
            document.getElementById('fade2').style.display = 'block';
            document.getElementById('fade3').style.display = 'block';
            document.getElementById('fade4').style.display = 'block';
        }
    });
     var Orientation = null;
        function uploadimg(avatarformid){
            
            var file = $("#avatarform").find("input")[0].files[0];
                //判斷類型是不是圖片    
                if(!/image\/\w+/.test(file.type)){       
                        alert("請確保文件爲圖像類型");     
                        return false;     
                } 
                layer.msg('圖片上傳中');
               
                //獲取圖片方向屬性
                EXIF.getData(file, function() {  
                    // alert(EXIF.pretty(this));  
                     EXIF.getAllTags(this);   
                     //alert(EXIF.getTag(this, 'Orientation'));   
                     Orientation = EXIF.getTag(this, 'Orientation');  
                     //return;  
                 });  
                
                
                 var reader = new FileReader();     
                reader.readAsDataURL(file);     
                reader.onload = function(e){ 
                      image_base64=this.result.split(",")[1];  
                      createCanvas(this.result);
                      //alert(image_base64.length);
                    } 
        }
        
        function createCanvas(src) {
                var img = new Image();
                img.src = src;
                img.onload = function() {
                    layer.closeAll();
                    var expectWidth = img.width;  
                     var expectHeight = img.height; 
                     var canvas = document.createElement("canvas");  
                     var ctx = canvas.getContext("2d"); 
                     var screenWidth = 200;
                     canvas.width = screenWidth;
                     canvas.height = (expectHeight/expectWidth)*screenWidth;
                     ctx.drawImage(this, 0, 0, canvas.width, canvas.height); 
                    /*  var expectWidth = this.naturalWidth;  
                     var expectHeight = this.naturalHeight;  
                     var canvas = document.createElement("canvas");  
                     var ctx = canvas.getContext("2d"); 
                     canvas.width = expectWidth;  
                     canvas.height =expectHeight;
                     ctx.drawImage(this, 0, 0, expectWidth, expectHeight);  */
                     var base64 = canvas.toDataURL("image/jpeg", 1.0);  
                   //修復ios  
                     if (navigator.userAgent.match(/iphone/i)) {  
                         //alert(expectWidth + ',' + expectHeight);  
                         //如果方向角不爲1，都需要進行旋轉 added by lzk 
                         //alert('旋轉處理'+Orientation); 
                         //alert("iphone"+"屬性值"+Orientation+"0000");  
                         if(Orientation != "" && Orientation != 1){  
                             //alert('旋轉處理'+Orientation);  
                             switch(Orientation){  
                                 case 6://需要順時針（向左）90度旋轉  
                                     rotateImg(this,'left',canvas);  
                                     break;  
                                 case 8://需要逆時針（向右）90度旋轉  
                                     rotateImg(this,'right',canvas);  
                                     break;  
                                  case 3://
                                     rotateImgNew(this,'right',canvas);//
                                     rotateImgNew(this,'right',canvas);//
                                     rotateImgNew(this,'right',canvas);//
                                     rotateImgNew(this,'right',canvas);//
                                     break;
                             }         
                         } 
                         base64 = canvas.toDataURL("image/jpeg", 1.0);  
                     }else if (navigator.userAgent.match(/Android/i)) {
                         // 修復android 
                         //alert("Android");
                            /* var encoder = new JPEGEncoder();  
                            base64 = encoder.encode(ctx.getImageData(0, 0, expectWidth, expectHeight), 80);   */
                            //rotateImg(this,'',canvas);  
                         if(Orientation != "" && Orientation != 1){  
                             //alert('旋轉處理'+Orientation);  
                             switch(Orientation){  
                                 case 6://需要順時針（向左）90度旋轉  
                                     rotateImg(this,'left',canvas);  
                                     break;  
                                 case 8://需要逆時針（向右）90度旋轉  
                                     rotateImg(this,'right',canvas);  
                                     break;  
                                  case 3://
                                     rotateImgNew(this,'right',canvas);//
                                     rotateImgNew(this,'right',canvas);//
                                     rotateImgNew(this,'right',canvas);//
                                     rotateImgNew(this,'right',canvas);//
                                     break;
                             }         
                         } 
                            base64 = canvas.toDataURL("image/jpeg", 1.0);  
                            
                      }
                    /*  else{
                          alert("other"+Orientation);
                          if(Orientation != "" && Orientation != 1){  
                                //alert('旋轉處理');  
                                switch(Orientation){  
                                    case 6://需要順時針（向左）90度旋轉  
                                        alert('需要順時針（向左）90度旋轉');  
                                        rotateImg(this,'left',canvas);  
                                        break;  
                                    case 8://需要逆時針（向右）90度旋轉  
                                        alert('需要順時針（向右）90度旋轉');  
                                        rotateImg(this,'right',canvas);  
                                        break;  
                                    case 3://需要180度旋轉  
                                        alert('需要180度旋轉');  
                                        rotateImg(this,'right',canvas);//轉兩次  
                                        rotateImg(this,'right',canvas);  
                                        break;  
                                }         
                            }  
                              
                            base64 = canvas.toDataURL("image/jpeg", 0.8);  
                      } */
                         
                     
                        //$("#avatarimg").attr('src', canvas.toDataURL("image/jpeg", 0.9));
                        $("#avatarimg").attr('src', base64);
                        console.log(base64)
                        var data1={
                                "custid":$("#custid").val(),
                                "uptype":$("#uptype").val(),
                                "imgStr":canvas.toDataURL("image/jpeg", 1.0)/* .split(',')[1] */
                                
                            };
                        
                        //$("#bindbtn")
                        $.ajax({
                            url:basepath+'/WECHAT/controller/index/uploadimg',
                            type:'post',
                            //processData:false,
                            contentType:"application/json",
                            data:JSON.stringify(data1),
                            dataType:'json',
                            success:function(response){
                                /* console.info(response);
                                $("#filename").val(response.object.filename);
                                var data2 = {
                                        "custid":$("#custid").val(),
                                        "filename":response.object.filename    
                                    };
                                console.log(data2)
                                $.ajax({
                                    url:basepath+'/controller/index/bindWmpAvatar',
                                    type:'post',
                                    //processData:false,
                                    contentType:"application/json",
                                    data:JSON.stringify(data2),
                                    dataType:'json',
                                    success:function(response){
                                        console.info(response);
                                        
                                    },
                                    error:function(err){
                                        console.info(err);
                                    }
                                }); */
                            },
                            error:function(err){
                                console.info(err);
                            }
                        });
                }
            }
        
        //對圖片旋轉處理 added by lzk  
        function rotateImg(img, direction,canvas) {  
                //alert(img);  
                
                //最小與最大旋轉方向，圖片旋轉4次後回到原方向    
                var min_step = 0;    
                var max_step = 3;    
                //var img = document.getElementById(pid);    
                if (img == null)return;    
                //img的高度和寬度不能在img元素隱藏後獲取，否則會出錯    
                var height = img.height;    
                var width = img.width;    
                //var step = img.getAttribute('step');    
                var step = 2;
                if (step == null) {    
                    step = min_step;    
                }    
                if (direction == 'right') {    
                    step++;    
                    //旋轉到原位置，即超過最大值    
                    step > max_step && (step = min_step);    
                } else {    
                    step--;    
                    step < min_step && (step = max_step);    
                }    
               
                //旋轉角度以弧度值爲參數    
                var degree = step * 90 * Math.PI / 180;    
                var ctx = canvas.getContext('2d');  

                switch (step) {    
                    case 0:    
                        canvas.width = width;    
                        canvas.height = height;    
                        var MAX_WH=400;
                        if(img.height > MAX_WH) {
                            // 寬度等比例縮放 *= 
                            img.width *= MAX_WH/ img.height;
                            img.height = MAX_WH;
                          }
                          if(img.width > MAX_WH) {
                            // 寬度等比例縮放 *= 
                            img.height *= MAX_WH/ img.width;
                            img.width = MAX_WH;
                          }
                        ctx.drawImage(img, 0, 0);    
                        break;    
                    case 1:    
                        canvas.width = height;    
                        canvas.height = width;    
                        ctx.rotate(degree);    
                        var MAX_WH=5000;
                        if(img.height > MAX_WH) {
                            // 寬度等比例縮放 *= 
                            img.width *= MAX_WH/ img.height;
                            img.height = MAX_WH;
                          }
                          if(img.width > MAX_WH) {
                            // 寬度等比例縮放 *= 
                            img.height *= MAX_WH/ img.width;
                            img.width = MAX_WH;
                          }
                        ctx.drawImage(img, 0, -img.height);   
                        break;    
                    case 2:    
                        canvas.width = width;    
                        canvas.height = height;    
                        ctx.rotate(degree);    
                        var MAX_WH=5000;
                        if(img.height > MAX_WH) {
                            // 寬度等比例縮放 *= 
                            img.width *= MAX_WH/ img.height;
                            img.height = MAX_WH;
                          }
                          if(img.width > MAX_WH) {
                            // 寬度等比例縮放 *= 
                            img.height *= MAX_WH/ img.width;
                            img.width = MAX_WH;
                          }
                        ctx.drawImage(img, -img.width, -img.height);  
                        break;    
                    case 3:    
                        canvas.width = height;    
                        canvas.height = width;    
                        ctx.rotate(degree);   
                        var MAX_WH=5000;
                        if(img.height > MAX_WH) {
                            // 寬度等比例縮放 *= 
                            img.width *= MAX_WH/ img.height;
                            img.height = MAX_WH;
                          }
                          if(img.width > MAX_WH) {
                            // 寬度等比例縮放 *= 
                            img.height *= MAX_WH/ img.width;
                            img.width = MAX_WH;
                          }
                        ctx.drawImage(img, -img.width, 0);    
                        break;    
                }    
            } 
        var stepnew = 2
        //對圖片旋轉處理 added by lzk  
        function rotateImgNew(img, direction,canvas) {  
                //alert(img);  
                
                //最小與最大旋轉方向，圖片旋轉4次後回到原方向    
                var min_step = 0;    
                var max_step = 3;    
                //var img = document.getElementById(pid);    
                if (img == null)return;    
                //img的高度和寬度不能在img元素隱藏後獲取，否則會出錯    
                var height = img.height;    
                var width = img.width;    
                //var step = img.getAttribute('step');    
                //var step = 2;
                if (stepnew == null) {    
                    stepnew = min_step;    
                }    
                if (direction == 'right') {    
                    stepnew++;    
                    //旋轉到原位置，即超過最大值    
                    stepnew > max_step && (stepnew = min_step);    
                } else {    
                    stepnew--;    
                    stepnew < min_step && (stepnew = max_step);    
                }    
               
                //旋轉角度以弧度值爲參數    
                var degree = stepnew * 90 * Math.PI / 180;    
                var ctx = canvas.getContext('2d');  
                switch (stepnew) {    
                    case 0:    
                        canvas.width = width;    
                        canvas.height = height;    
                        ctx.drawImage(img, 0, 0);    
                        break;    
                    case 1:    
                        canvas.width = height;    
                        canvas.height = width;    
                        ctx.rotate(degree);    
                        ctx.drawImage(img, 0, -height);    
                        break;    
                    case 2:    
                        canvas.width = width;    
                        canvas.height = height;    
                        ctx.rotate(degree);    
                        ctx.drawImage(img, -width, -height);    
                        break;    
                    case 3:    
                        canvas.width = height;    
                        canvas.height = width;    
                        ctx.rotate(degree);    
                        ctx.drawImage(img, -width, 0);    
                        break;    
                }    
            }
        
         //分享轉發次數操作
        function wmpDataOper(){
            var opertype="";
            if(getUrlParam("modifyFlag") != null && getUrlParam("modifyFlag") == 'true'){
                //用戶自己分享，更新分享次數加1
                opertype="share";    
            }else{
                opertype="forward";
            }
            var data1={
                    "crsidcard":'${sysuser.csridcard}',
                    "orgid":'${sysuser.orgid}',
                    "opertype":opertype
                };
            $.ajax({
                url:basepath+'/WECHAT/controller/index/wmpDataOper',
                type:'post',
                //processData:false,
                contentType:"application/json",
                data:JSON.stringify(data1),
                dataType:'json',
                success:function(response){
                    console.info(response);
                },
                error:function(err){
                    console.info(err);
                }
            });
        }
    </script>
</body>

</html>

 

 

 

發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章