Commit eec9ce4f04325a5a96466dfcde6ef2f8d2c818f8
1 parent
885316de
图片文字合成
Showing
1 changed file
with
8 additions
and
20 deletions
src/pages/test.vue
| @@ -3,10 +3,13 @@ | @@ -3,10 +3,13 @@ | ||
| 3 | <div class="index"> | 3 | <div class="index"> |
| 4 | <div class="canvas" ref="canvas"> | 4 | <div class="canvas" ref="canvas"> |
| 5 | <div class="avatar"> | 5 | <div class="avatar"> |
| 6 | - <img :src=imgUrl alt=""> | 6 | + <img src="https://wjjtest.ys2.cnliveimg.com/shop/img/2019/12/31/5e0b06db22be5.jpg" alt=""> |
| 7 | + </div> | ||
| 8 | + <div> | ||
| 9 | + 杜致阳签名 | ||
| 7 | </div> | 10 | </div> |
| 8 | </div> | 11 | </div> |
| 9 | - <div class="save_btn" @click="getimgUrl"> | 12 | + <div class="save_btn" @click="savecanvas"> |
| 10 | 保存图片 | 13 | 保存图片 |
| 11 | </div> | 14 | </div> |
| 12 | </div> | 15 | </div> |
| @@ -16,24 +19,11 @@ | @@ -16,24 +19,11 @@ | ||
| 16 | export default { | 19 | export default { |
| 17 | data () { | 20 | data () { |
| 18 | return { | 21 | return { |
| 19 | - imgUrl:'https://wjjtest.ys2.cnliveimg.com/shop/img/2019/12/31/5e0b06db22be5.jpg' | ||
| 20 | }; | 22 | }; |
| 21 | }, | 23 | }, |
| 22 | mounted(){ | 24 | mounted(){ |
| 23 | }, | 25 | }, |
| 24 | methods: { | 26 | methods: { |
| 25 | - // 直接获取图片url传给原生 | ||
| 26 | - getimgUrl(){ | ||
| 27 | - // 调用原生方法 | ||
| 28 | - // 调用分享（新方法） | ||
| 29 | - if (window.webkit && window.webkit.messageHandlers && window.webkit.messageHandlers.CNDSCheckAllowVisitPhotoAlbumHandler) { | ||
| 30 | - // 获取URL图片 | ||
| 31 | - window.webkit.messageHandlers.CNDSCheckAllowVisitPhotoAlbumHandler.postMessage({body: {imgUrl: this.imgUrl}}); | ||
| 32 | - } else if (window.obj && window.obj.CNDSCheckAllowVisitPhotoAlbumHandler) { | ||
| 33 | - // 获取URL图片 | ||
| 34 | - window.obj.CNDSCheckAllowVisitPhotoAlbumHandler(this.imgUrl); | ||
| 35 | - } | ||
| 36 | - }, | ||
| 37 | savecanvas(){ | 27 | savecanvas(){ |
| 38 | let canvas = document.querySelector('.canvas'); | 28 | let canvas = document.querySelector('.canvas'); |
| 39 | let that = this; | 29 | let that = this; |
| @@ -48,7 +38,6 @@ | @@ -48,7 +38,6 @@ | ||
| 48 | }; | 38 | }; |
| 49 | imgData = imgData.replace(_fixType(type),'image/octet-stream'); | 39 | imgData = imgData.replace(_fixType(type),'image/octet-stream'); |
| 50 | let filename = "UUSound" + '.' + type; | 40 | let filename = "UUSound" + '.' + type; |
| 51 | - debugger | ||
| 52 | that.saveFile(imgData,filename); | 41 | that.saveFile(imgData,filename); |
| 53 | }); | 42 | }); |
| 54 | }, | 43 | }, |
| @@ -59,8 +48,7 @@ | @@ -59,8 +48,7 @@ | ||
| 59 | 48 | ||
| 60 | let event = document.createEvent('MouseEvents'); | 49 | let event = document.createEvent('MouseEvents'); |
| 61 | event.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null); | 50 | event.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null); |
| 62 | -// save_link.dispatchEvent(event); | ||
| 63 | - console.log(data) | 51 | + save_link.dispatchEvent(event); |
| 64 | } | 52 | } |
| 65 | } | 53 | } |
| 66 | } | 54 | } |
| @@ -81,11 +69,11 @@ | @@ -81,11 +69,11 @@ | ||
| 81 | } | 69 | } |
| 82 | .save_btn{ | 70 | .save_btn{ |
| 83 | height: 100px; | 71 | height: 100px; |
| 84 | - background: #333333; | ||
| 85 | line-height: 100px; | 72 | line-height: 100px; |
| 73 | + background: #333333; | ||
| 86 | text-align: center; | 74 | text-align: center; |
| 87 | color: #ffffff; | 75 | color: #ffffff; |
| 88 | - font-size: 30px; | 76 | + font-size: 36px; |
| 89 | } | 77 | } |
| 90 | } | 78 | } |
| 91 | </style> | 79 | </style> |