Home Explore Help
Register Sign In
zhaojiemin
/
tourist
Watch 1
Star 0
Fork 0
Files Issues 0 Pull Requests 0 Wiki
Browse Source

分享页面修改

zjm 5 years ago
parent
afefd6c3e2
commit
40f77b8c95
1 changed files with 126 additions and 33 deletions
Split View Show Diff Stats
  1. 126 33
      src/main/resources/templates/testShare.html

+ 126 - 33
src/main/resources/templates/testShare.html
View File 

@@ -19,6 +19,7 @@
19 19 
 <script src="https://cdn.bootcss.com/html2canvas/0.5.0-beta4/html2canvas.js"></script>
20 20 
 <script type="text/javascript" src='js/test.js'></script>
21 21 
 <script type="text/javascript" src='js/es6-promise.js'></script>
22 
+<script src="http://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>
22 23 
 </head>
23 24 
 <body>
24 25 
 <div class="content">

@@ -59,13 +60,17 @@
59 60 
 </div>
60 61 
 <script>
61 62 
     $(function(){
62 
-        init.showIndicator();
63 63 
         function getUrlParms(name){
64 64 
            var reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)");
65 65 
            var r = window.location.search.substr(1).match(reg);
66 66 
            if(r!=null) return unescape(r[2]); return null;
67 
-        }
68 
-        var pick = getUrlParms("pick") || 'B,A,D,B';
67 
+        };
68 
+        var pick = getUrlParms("pick");
69 
+        if( !pick ){
70 
+            window.location.href='index.html';
71 
+            return
72 
+        };
73 
+        init.showIndicator();
69 74 
         $.ajax({
70 75 
             type:'get',
71 76 
             url : 'http://wx.yingyinglicai.com/question/pick?pick='+pick,

@@ -73,44 +78,132 @@
73 78 
             contentType:"application/json; charset=utf-8",
74 79 
             success:function(data) {
75 80 
                 if(data.success){
76 
-                    console.log(data);
77 
-                    // openId = data.data
78 
-                    console.log(data)
79 
-                    alert(data.data.resultOutter)
80 
-                    init.hideIndicator();
81 
+                    var imgSrc = "";
82 
+                    getCanvasBase64(imgSrc).then(function (base64) {
83 
+                        console.log("方式二》》》》》》》》》",base64);
84 
+                        getImg();
85 
+                    }, function (err) {
86 
+                        console.log(err);
87 
+                    });
81 88 
                 }
82 89
83 90 
             },
84 91 
             error:function() {
85 
-                // alert('fail');
86 92 
                 init.hideIndicator();
87 93 
             }
88 94 
         });
89 
-    });
90 
-
91 
-
92 
-
95 
+        function getBase64Image(img, width, height) {
96 
+            var canvas = document.createElement("canvas");
97 
+            canvas.width = width ? width : img.width;
98 
+            canvas.height = height ? height : img.height;
99 
+            var ctx = canvas.getContext("2d");
100 
+            ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
101 
+            var dataURL = canvas.toDataURL();
102 
+            return dataURL;
103 
+        }
104 
+        function getCanvasBase64(img) {
105 
+            var image = new Image();
106 
+            //至关重要
107 
+            image.crossOrigin = '';
108 
+            image.src = img;
109 
+            //至关重要
110 
+            var deferred = $.Deferred();
111 
+            if (img) {
112 
+                image.onload = function () {
113 
+                    deferred.resolve(getBase64Image(image));//将base64传给done上传处理
114 
+                    // document.getElementById("container2").appendChild(image);
115 
+            }
116 
+                return deferred.promise();//问题要让onload完成后再return sessionStorage['imgTest']
117 
+            }
118 
+        }
119 
+        // 分享
120 
+        var wxParam = {};
121 
+        var wx_share = function(param, url) {
122 
+            $.ajax({
123 
+                url:  'http://wx.yingyinglicai.com/checkJsAuth?url='+url,
124 
+                type: "GET",
125 
+                dataType:'JSON',
126 
+                contentType:"application/json; charset=utf-8",
127 
+                success: function(res) {
128 
+                    if (res.code == 0) {
129 
+                        var data = res.data;
130 
+                        wxParam = param;
93 131
94 
-    // var canvas2 = document.createElement("canvas");
95 
-    // let
96 
-    // _canvas = document.querySelector('#canvas');
97 
-    // var w = parseInt(window.getComputedStyle(_canvas).width);
98 
-    // var h = parseInt(window.getComputedStyle(_canvas).height);
99 
-    // //将canvas画布放大若干倍，然后盛放在较小的容器内，就显得不模糊了
100 
-    // canvas2.width = w * 2;
101 
-    // canvas2.height = h * 2;
102 
-    // canvas2.style.width = w + "px";
103 
-    // canvas2.style.height = h + "px";
104 
-    // //可以按照自己的需求，对context的参数修改,translate指的是偏移量
105 
-    // //  var context = canvas.getContext("2d");
106 
-    // //  context.translate(0,0);
107 
-    // var context = canvas2.getContext("2d");
108 
-    // context.scale(2, 2);
109 
-    // html2canvas(document.querySelector('#canvas'), { canvas: canvas2 }).then(function(canvas) {
110 
-    //     //document.body.appendChild(canvas);
111 
-    //     //canvas转换成url，然后利用a标签的download属性，直接下载，绕过上传服务器再下载
112 
-    //     // document.querySelector("#download").setAttribute('href', canvas.toDataURL());
113 
-    // });
132 
+                        // 分享配置
133 
+                        wx.config({
134 
+                            debug: false,
135 
+                            appId: data.app_id, // 必填，企业号的唯一标识
136 
+                            timestamp: data.timestamp, // 必填，生成签名的时间戳
137 
+                            nonceStr: data.nonceStr, // 必填，生成签名的随机串
138 
+                            signature: data.signature,// 必填，签名，见附录1
139 
+                            jsApiList: ['onMenuShareTimeline','onMenuShareAppMessage'] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
140 
+                        });
141 
+                    }
142 
+                },
143 
+                error : function(res) {}
144 
+            })
145 
+        };
146 
+        wx_share({
147 
+            title: "1分享标题分享标题1",
148 
+            desc: "分享描述分享描述" ,
149 
+            link: "http://wx.yingyinglicai.com/index",
150 
+            imgUrl: "http://bbs.eqxiu.com/uc_server/avatar.php?uid=2745371&size=small",
151 
+            successFn: function(){
152 
+                // 用户确认分享后执行的回调函数
153 
+            },
154 
+            cancelFn: function(){
155 
+                // 用户取消分享后执行的回调函数
156 
+            }
157 
+        },window.location.href);
158 
+
159 
+        wx.ready(function () {
160 
+            wx.onMenuShareTimeline({//分享到朋友圈
161 
+                title: wxParam.title,
162 
+                link: wxParam.link,
163 
+                imgUrl: wxParam.imgUrl,
164 
+                success: function () {
165 
+                    if (wxParam.successFn) {wxParam.successFn();}
166 
+                }, cancel: function () {
167 
+                    if (wxParam.cancelFn) {wxParam.cancelFn();}
168 
+                }
169 
+            });
170 
+            wx.onMenuShareAppMessage({//分享给朋友
171 
+                title: wxParam.title,
172 
+                desc: wxParam.desc,
173 
+                link: wxParam.link,
174 
+                imgUrl: wxParam.imgUrl,
175 
+                success: function () {
176 
+                    if (wxParam.successFn) {wxParam.successFn();}
177 
+                }, cancel: function () {
178 
+                    if (wxParam.cancelFn) {wxParam.cancelFn();}
179 
+                }
180 
+            });
181 
+        });
182 
+        function getImg(){
183 
+            var canvas2 = document.createElement("canvas");
184 
+            let _canvas = document.querySelector('#canvas');
185 
+            var w = parseInt(window.getComputedStyle(_canvas).width);
186 
+            var h = parseInt(window.getComputedStyle(_canvas).height);
187 
+            canvas2.width = w * 2;
188 
+            canvas2.height = h * 2;
189 
+            canvas2.style.width = w + "px";
190 
+            canvas2.style.height = h + "px";
191 
+            var context = canvas2.getContext("2d");
192 
+            context.scale(2, 2);
193 
+            html2canvas(document.querySelector('#canvas'), { canvas: canvas2 }).then(function(imgUrl) {
194 
+                let oImg = document.createElement('img');
195 
+                oImg.id = 'oImg';
196 
+                oImg.className = 'o-img';
197 
+                oImg.src= imgUrl.toDataURL();//imgUrl是html2canvas返回的截图的base64码
198 
+                document.body.appendChild(oImg);//将生成的截图放到页面中
199 
+                $("#canvas").hide();
200 
+                init.hideIndicator();
201 
+            });
202 
+        };
203 
+        $("#goWeChat").on('click',function(){
204 
+            window.location.href='https://mp.weixin.qq.com/mp/profile_ext?action=home&__biz=MzAwMTAzNTAwMA==#wechat_redirect';
205 
+        })
206 
+    });
114 207 
 </script>
115 208 
 </body>
116 209 
 </html>