w-front-end / Worship_and_learn_upward · Commits

Commit 2f94f440b9e9022218865d29c43088d3b5c2edb7

Authored by zhiyangdu
1 parent f258f058

签名认证

Inline Side-by-side
Showing 1 changed file with 50 additions and 50 deletions
src/pages/test.vue
  View file @2f94f44
@@ -5,10 +5,10 @@ @@ -5,10 +5,10 @@
5 <h2>{{this.textInfo}}</h2> 5 <h2>{{this.textInfo}}</h2>
6 </div> 6 </div>
7 <img :src="dataURL" alt="" v-show="!firstFlag"> 7 <img :src="dataURL" alt="" v-show="!firstFlag">
8 - <div v-show="this.isCNLive.value" class="save_btn" @click="savecanvas">  
9 - 点击按钮保存图片  
10 - </div>  
11 - <div v-show="!this.isCNLive.value" class="tip_text" > 8 + <!--<div v-show="this.isCNLive.value" class="save_btn" @click="savecanvas">-->
  9 + <!--点击按钮保存图片-->
  10 + <!--</div>-->
  11 + <div class="tip_text" >
12 长按页面保存证书到手机相册 12 长按页面保存证书到手机相册
13 </div> 13 </div>
14 </div> 14 </div>
@@ -21,7 +21,7 @@ @@ -21,7 +21,7 @@
21 dataURL:'', 21 dataURL:'',
22 firstFlag:true, 22 firstFlag:true,
23 imgUrl:"https://wjjtest.ys2.cnliveimg.com/shop/img/2019/12/31/5e0b06db22be5.jpg", 23 imgUrl:"https://wjjtest.ys2.cnliveimg.com/shop/img/2019/12/31/5e0b06db22be5.jpg",
24 - textInfo: new Date().getTime() 24 + textInfo:"杜致阳签名"
25 }; 25 };
26 }, 26 },
27 27
@@ -34,49 +34,49 @@ @@ -34,49 +34,49 @@
34 }, 34 },
35 methods: { 35 methods: {
36 // 直接获取图片url传给原生 36 // 直接获取图片url传给原生
37 - getimgUrl(imgData){  
38 - // 调用原生方法  
39 - // 调用分享（新方法）  
40 - if (window.webkit && window.webkit.messageHandlers && window.webkit.messageHandlers.CNDSCheckAllowVisitPhotoAlbumHandler) {  
41 - // 获取URL图片  
42 - window.webkit.messageHandlers.CNDSCheckAllowVisitPhotoAlbumHandler.postMessage({body: {imgData:imgData}});  
43 - } else if (window.obj && window.obj.CNDSCheckAllowVisitPhotoAlbumHandler) {  
44 - // 获取URL图片  
45 - window.obj.CNDSCheckAllowVisitPhotoAlbumHandler(imgData);  
46 - }  
47 - },  
48 - savecanvas(){  
49 - let canvas = document.querySelector('#captureId');  
50 - let that = this;  
51 - html2canvas(canvas,{scale:2,logging:false,useCORS:true}).then(function(canvas) {  
52 - let type = 'png';  
53 - let imgData = canvas.toDataURL(type);  
54 - // 照片格式处理  
55 - let _fixType = function(type) {  
56 - type = type.toLowerCase().replace(/jpg/i, 'jpeg');  
57 - let r = type.match(/png|jpeg|bmp|gif/)[0];  
58 - return 'image/' + r;  
59 - };  
60 -// imgData = imgData.replace(_fixType(type),'');  
61 - let filename = "证书" + '.' + type;  
62 - if(that.isCNLive.value){  
63 - that.getimgUrl(imgData)  
64 - }else {  
65 - that.saveFile(imgData,filename);  
66 - }  
67 -  
68 - });  
69 - },  
70 - saveFile(data, filename){  
71 - let save_link = document.createElementNS('http://www.w3.org/1999/xhtml', 'a');  
72 - save_link.href = data;  
73 - save_link.download = filename;  
74 - console.log(save_link.download)  
75 - console.log(save_link.href)  
76 - let event = document.createEvent('MouseEvents');  
77 - event.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);  
78 - save_link.dispatchEvent(event);  
79 - } 37 +// getimgUrl(imgData){
  38 +// // 调用原生方法
  39 +// // 调用分享（新方法）
  40 +// if (window.webkit && window.webkit.messageHandlers && window.webkit.messageHandlers.CNDSCheckAllowVisitPhotoAlbumHandler) {
  41 +// // 获取URL图片
  42 +// window.webkit.messageHandlers.CNDSCheckAllowVisitPhotoAlbumHandler.postMessage({body: {imgData:imgData}});
  43 +// } else if (window.obj && window.obj.CNDSCheckAllowVisitPhotoAlbumHandler) {
  44 +// // 获取URL图片
  45 +// window.obj.CNDSCheckAllowVisitPhotoAlbumHandler(imgData);
  46 +// }
  47 +// },
  48 +// savecanvas(){
  49 +// let canvas = document.querySelector('#captureId');
  50 +// let that = this;
  51 +// html2canvas(canvas,{scale:2,logging:false,useCORS:true}).then(function(canvas) {
  52 +// let type = 'png';
  53 +// let imgData = canvas.toDataURL(type);
  54 +// // 照片格式处理
  55 +// let _fixType = function(type) {
  56 +// type = type.toLowerCase().replace(/jpg/i, 'jpeg');
  57 +// let r = type.match(/png|jpeg|bmp|gif/)[0];
  58 +// return 'image/' + r;
  59 +// };
  60 +//// imgData = imgData.replace(_fixType(type),'');
  61 +// let filename = "证书" + '.' + type;
  62 +// if(that.isCNLive.value){
  63 +// that.getimgUrl(imgData)
  64 +// }else {
  65 +// that.saveFile(imgData,filename);
  66 +// }
  67 +//
  68 +// });
  69 +// },
  70 +// saveFile(data, filename){
  71 +// let save_link = document.createElementNS('http://www.w3.org/1999/xhtml', 'a');
  72 +// save_link.href = data;
  73 +// save_link.download = filename;
  74 +// console.log(save_link.download)
  75 +// console.log(save_link.href)
  76 +// let event = document.createEvent('MouseEvents');
  77 +// event.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
  78 +// save_link.dispatchEvent(event);
  79 +// }
80 } 80 }
81 } 81 }
82 </script> 82 </script>
@@ -84,12 +84,12 @@ @@ -84,12 +84,12 @@
84 .index{ 84 .index{
85 height: 100%; 85 height: 100%;
86 width: 100%; 86 width: 100%;
87 - position: relative;  
88 .canvas{ 87 .canvas{
89 height: 100%; 88 height: 100%;
90 background: #d5574a; 89 background: #d5574a;
91 padding: 0.5067rem 0.6rem 0; 90 padding: 0.5067rem 0.6rem 0;
92 box-sizing: border-box; 91 box-sizing: border-box;
  92 + position: relative;
93 img{ 93 img{
94 width: 100%; 94 width: 100%;
95 } 95 }
@@ -108,7 +108,7 @@ @@ -108,7 +108,7 @@
108 h2{ 108 h2{
109 position: absolute; 109 position: absolute;
110 top:20px; 110 top:20px;
111 - right: 50px; 111 + left: 100px;
112 } 112 }
113 .back{ 113 .back{
114 height: 860px; 114 height: 860px;