wp.vue 13 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474
  1. <template>
  2. <view class="box">
  3. <view style="padding-top: 100rpx;padding-left: 73rpx;padding-right: 75rpx;">
  4. <view style="border-radius: 20rpx;">
  5. <canvas canvas-id="mini_poster" style="width: 600rpx;" :style="{ height: canvasH + 'px' }"></canvas><!-- :style="{ width: canvasW + 'px', height: canvasH + 'px' }" -->
  6. </view>
  7. </view>
  8. <view style="height: 106rpx;"></view>
  9. <!-- <view class="footer">
  10. <view style="height: 106rpx; align-items: center; background-color: #333333;">
  11. <button style="background: transparent; height: 106rpx; line-height: 106rpx;" @tap="toSaveImage">保存名片</button>
  12. </view>
  13. </view> -->
  14. <view class="downloadBtn" @click="toSaveImage">保存图片</view>
  15. <!-- <img :src="mpWxQr2" alt="" ref="image" class="wcl"> -->
  16. </view>
  17. </template>
  18. <script>
  19. export default {
  20. data() {
  21. return {
  22. mpWxQr: "http://dmsphoto.66km.com.cn/thFiles/2D929DEF-6178-42E3-AC8F-1EA2078CD9C4.png",
  23. canvasW: 0,
  24. canvasH: 0,
  25. invest_areas: [{id: 1, name: "儿童教育"}, {id: 1, name: "少儿编程"}, {id: 1, name: "生物智能"}, {id: 1, name: "万物相连"}, {id: 1, name: "大数据"}],
  26. nickname: "",
  27. avatar: "",
  28. company: "",
  29. phone: "17610998099",
  30. email: "redoume@163.com",
  31. time: "2022.01.21~2022.01.2",
  32. finished: false,
  33. sellingPoint:'',
  34. userInfo:'',
  35. ext:'',
  36. mpWxQr2:'',
  37. mpWxQr3:'',
  38. mpWxQr4:'',
  39. }
  40. },
  41. computed: {
  42. showInvestAreas() {
  43. if (this.invest_areas) {
  44. const names = []
  45. this.invest_areas.forEach(item => {
  46. names.push(item.name)
  47. })
  48. return names.join(" ")
  49. }
  50. return '未设置'
  51. }
  52. },
  53. onLoad(opt) {
  54. //this.canvasW = uni.getSystemInfoSync().windowWidth
  55. //this.canvasH = this.calculateCanvasHeight()
  56. this.avatar=opt.img;
  57. this.nickname=opt.name;
  58. if(opt.sellingPoint&&opt.sellingPoint!='undefined'){
  59. this.sellingPoint=opt.sellingPoint;
  60. }
  61. console.log('this.sellingPoint==='+this.sellingPoint)
  62. if(this.nickname.length>18){
  63. this.nickname=this.nickname.substring(0,18)+'...'
  64. }
  65. this.userInfo=this.$store.state.userInfo;
  66. this.ext=this.$common.getExtStoreId();
  67. this.canvasW =uni.upx2px(600)
  68. if(this.sellingPoint){
  69. this.canvasH = uni.upx2px(817)
  70. }else{
  71. this.canvasH = uni.upx2px(717)
  72. }
  73. var that=this;
  74. var type=opt.type
  75. if(type==2){
  76. var bizType=2;
  77. var path='pages/activity/jkDetail'
  78. }else{
  79. var bizType=1;
  80. var path='pages/shop/goodsDetail'
  81. }
  82. uni.showLoading({
  83. title: '加载中'
  84. })
  85. this.$request.httpBinary('openMall/shareQrCode', {
  86. bizType:bizType,
  87. path:path,//?id+this.id+'&shareId='+this.userInfo.openId,
  88. goodsId:opt.id,
  89. openId:this.userInfo.openId,
  90. unionId:this.ext.unionId
  91. },'GET').then(res => {
  92. //console.log(res)
  93. this.mpWxQr3=res;
  94. uni.hideLoading();
  95. //this.mpWxQr2= 'data:image/png;base64,'+uni.arrayBufferToBase64(res)
  96. // this.mpWxQr4= uni.arrayBufferToBase64(res)
  97. this.toDrawCanvas()
  98. })
  99. // this.$request.httpBinary('openMall/shareQrCode', {
  100. // bizType:1,
  101. // path:'pages/shop/goodsDetail',//?id+this.id+'&shareId='+this.userInfo.openId,
  102. // goodsId:opt.id,
  103. // openId:this.userInfo.openId,
  104. // unionId:this.ext.unionId
  105. // },'GET').then(res => {
  106. // //console.log(res)
  107. // this.mpWxQr2= 'data:image/png;base64,'+uni.arrayBufferToBase64(res)
  108. // // let theNode=uni.createSelectorQuery().select(".wcl")
  109. // // theNode.boundingClientRect((data)=>{
  110. // // console.log(data)
  111. // // // that.mpWxQr=data
  112. // // }).exec()
  113. // // this.mpWxQr = uni.createSelectorQuery().select('wcl')
  114. // this.toDrawCanvas()
  115. // })
  116. //return false;
  117. },
  118. methods: {
  119. toSaveImage() {
  120. if (!this.finished) {
  121. uni.showToast({
  122. title: '正在生成图片,稍后再试',
  123. icon: 'none'
  124. })
  125. return
  126. }
  127. const that = this
  128. uni.canvasToTempFilePath({
  129. canvasId: 'mini_poster',
  130. success: (res) => {
  131. uni.saveImageToPhotosAlbum({
  132. filePath: res.tempFilePath,
  133. success: () => {
  134. uni.showToast({
  135. title: '保存成功'
  136. })
  137. },
  138. fail() {
  139. uni.showToast({
  140. icon: 'none',
  141. title: '保存名片码失败'
  142. })
  143. }
  144. })
  145. },
  146. fail() {
  147. uni.showToast({
  148. icon: 'none',
  149. title: '保存名片码失败'
  150. })
  151. }
  152. })
  153. },
  154. async toDrawCanvas() {
  155. const padding = uni.upx2px(34)
  156. const cardHeight = uni.upx2px(380)
  157. const cw = this.canvasW - 2 * padding
  158. let ctx = uni.createCanvasContext('mini_poster', this)
  159. // 左上角
  160. var cx = uni.upx2px(30)
  161. var cy = uni.upx2px(30)
  162. // ctx.arc(this.canvasW, 0, this.canvasW,this.canvasH, cx)
  163. // 透明背景
  164. // ctx.setFillStyle('rgba(255, 255, 255, 0)')
  165. ctx.setFillStyle('#FFFFFF')
  166. ctx.fillRect(0, 0, this.canvasW, this.canvasH)
  167. // draw card round rect
  168. const r = uni.upx2px(12)
  169. this.drawRoundRect(ctx, padding, padding, cw, cardHeight, r, 2)
  170. // draw card content
  171. this.drawCard(ctx, padding, padding, cw, cardHeight)
  172. // draw avatar
  173. const av = uni.upx2px(540)
  174. const topimgh = uni.upx2px(317)
  175. //console.log(av)
  176. //console.log(topimgh)
  177. const hi = await this.downloadImage(this.avatar)
  178. if (hi.tempFilePath) {
  179. const x = uni.upx2px(30)
  180. const y = uni.upx2px(30)
  181. this.drawRoundRectAvatar(ctx, x, y, av, topimgh, r, hi.tempFilePath)
  182. }
  183. // draw hello info
  184. //this.drawHelloInfo(ctx, padding, padding + cardHeight + padding, cw)
  185. // draw qr code
  186. if (this.mpWxQr) {
  187. var fsm = uni.getFileSystemManager();
  188. //var filePath='../../static/timg/CS.png'
  189. var times = new Date().getTime();
  190. var codeimg = wx.env.USER_DATA_PATH + '/' + times + '.png';
  191. var that=this;
  192. fsm.writeFile({
  193. filePath: codeimg, // 要写入的文件路径 (本地路径)
  194. data: this.mpWxQr3, // 要写入的文本或二进制数据
  195. encoding:"base64", // 指定写入文件的字符编码
  196. success(e) {
  197. console.log(e)
  198. console.log(codeimg)
  199. var wxsx=uni.upx2px(48)
  200. if(that.sellingPoint){
  201. var wxsy=uni.upx2px(649)
  202. }else{
  203. var wxsy=uni.upx2px(549)
  204. }
  205. var wxwidth=uni.upx2px(158)
  206. ctx.drawImage(codeimg, wxsx, wxsy, wxwidth,wxwidth)
  207. },
  208. fail(err) {
  209. console.log(err)
  210. }
  211. });
  212. const hello = await this.downloadImage(this.mpWxQr)
  213. //const padding = uni.upx2px(34)
  214. //const av = uni.upx2px(180)
  215. //const totalH = this.calculateCanvasHeight()
  216. //console.log("totalH=="+totalH)
  217. //console.log(hello.tempFilePath)
  218. // var wxsx=uni.upx2px(68)
  219. // var wxsy=uni.upx2px(649)
  220. // var wxwidth=uni.upx2px(148)
  221. // ctx.drawImage(codeimg, wxsx, wxsy, wxwidth,wxwidth)
  222. if (hello.tempFilePath) {
  223. //ctx.drawImage(hello.tempFilePath, wxsx, wxsy, wxwidth,wxwidth)
  224. }
  225. }
  226. ctx.draw()
  227. this.finished = true
  228. },
  229. async drawCard(ctx, x, y, w, h) {
  230. // draw company
  231. //let vp = y + uni.upx2px(45)
  232. //const hp = x + uni.upx2px(52)
  233. let vp = uni.upx2px(400)
  234. const hp = uni.upx2px(52)
  235. ctx.setTextBaseline('center')
  236. const fz30 = uni.upx2px(32)
  237. ctx.fillStyle = '#212121'
  238. ctx.setFontSize(fz30)
  239. ctx.fillText(this.nickname, hp, vp)
  240. var timeX=hp;
  241. var timeY=vp+30
  242. const fz26 = uni.upx2px(26)
  243. ctx.setFillStyle('#3C3C3C')
  244. ctx.setFontSize(fz26)
  245. ctx.fillText(this.time, timeX, timeY)
  246. var sm=this.sellingPoint
  247. ctx.setFillStyle('#999999')
  248. ctx.setFontSize(fz26)
  249. var smy=timeY+20
  250. var maxwidth = uni.upx2px(550)
  251. if(sm.length>20){
  252. var sm1=sm.substring(0,20)
  253. ctx.fillText(sm1, timeX, smy)
  254. if(sm.length>40){
  255. var sm2=sm.substring(20,40)
  256. ctx.fillText(sm2, timeX, smy+20)
  257. var sm3=sm.substring(40,60)
  258. ctx.fillText(sm3, timeX, smy+40)
  259. }else{
  260. var sm2=sm.substring(20,40)
  261. ctx.fillText(sm2, timeX, smy+20)
  262. }
  263. }else{
  264. ctx.fillText(sm, timeX, smy)
  265. }
  266. var wemtis1='名额有限 先到先得'
  267. var wemtisx=uni.upx2px(240)
  268. if(this.sellingPoint){
  269. var wemtisy=uni.upx2px(700)
  270. }else{
  271. var wemtisy=uni.upx2px(600)
  272. }
  273. ctx.setFillStyle('#999999')
  274. const fz24 = uni.upx2px(24)
  275. ctx.setFontSize(fz24)
  276. ctx.fillText(wemtis1,wemtisx,wemtisy)
  277. var wemtis2='长按二维码识别参与活动'
  278. var wemtisy2=wemtisy+30
  279. ctx.fillText(wemtis2,wemtisx,wemtisy2)
  280. // draw nickname
  281. vp = vp + 30
  282. vp = vp + 42
  283. const iconW = uni.upx2px(30)
  284. const textH = hp + iconW + 6
  285. ctx.setFillStyle('#333333')
  286. ctx.setFontSize(fz30)
  287. vp = vp + 28
  288. ctx.setFillStyle('#333333')
  289. ctx.setFontSize(fz30)
  290. // ctx.fillText(this.showInvestAreas, textH, vp)
  291. const oPadding = uni.upx2px(34)
  292. const iPadding = uni.upx2px(40)
  293. const textW = w - textH + oPadding - iPadding
  294. //this.drawTextInOneLine(ctx, this.showInvestAreas, textH, vp, textW)
  295. vp = vp + 28
  296. ctx.setFillStyle('#333333')
  297. ctx.setFontSize(fz30)
  298. //ctx.fillText(this.phone ? this.phone : '', textH, vp)
  299. },
  300. async drawHelloInfo(ctx, x, y, w) {
  301. let vp = y + 12
  302. const hp = x
  303. ctx.setTextBaseline('top')
  304. const fz30 = uni.upx2px(30)
  305. ctx.setFillStyle('#333333')
  306. ctx.setFontSize(fz30)
  307. ctx.fillText('您好,', hp, vp)
  308. const text = "我是来自 " + this.company + ' 的投资人' + this.nickname
  309. const lines = this.drawTextInLines(ctx, text, hp, vp, w, 26)
  310. vp += 26 * lines + 26
  311. ctx.fillText('这是我的名片,请惠存。', hp, vp)
  312. vp += 26
  313. ctx.fillText('谢谢', hp, vp)
  314. vp += 26
  315. vp += 40
  316. ctx.setFillStyle('#F37231')
  317. ctx.fillRect(hp, vp, 20, 3)
  318. vp += 7
  319. ctx.setFillStyle('#333333')
  320. const fz28 = uni.upx2px(28)
  321. ctx.setFontSize(fz28)
  322. ctx.fillText('长按识别二维码', hp, vp)
  323. vp += 20
  324. const ttt = '在大天使中查看我的更多信息'
  325. ctx.fillText(ttt, hp, vp)
  326. },
  327. calculateCanvasHeight() {
  328. // 400 is card height
  329. const ctx = uni.createCanvasContext('test_poster')
  330. const padding = uni.upx2px(34)
  331. const text = "我是来自 " + this.company + ' 的投资人' + this.nickname
  332. const rows = this.drawTextInLines(ctx, text, padding, 0, this.canvasW - 2 * padding, 26)
  333. const cardH = uni.upx2px(380)
  334. const h = padding * 2 + cardH + padding + 12 + 26 * 3 + rows * 26
  335. return h + 90
  336. },
  337. _drawRoundRect(ctx, x, y, w, h, r) {
  338. ctx.beginPath()
  339. // 左上角
  340. ctx.arc(x + r, y + r, r, Math.PI, Math.PI * 1.5)
  341. // 右上角
  342. ctx.arc(x + w - r, y + r, r, Math.PI * 1.5, Math.PI * 2)
  343. // 右下角
  344. ctx.arc(x + w - r, y + h - r, r, 0, Math.PI * 0.5)
  345. // 左下角
  346. ctx.arc(x + r, y + h - r, r, Math.PI * 0.5, Math.PI)
  347. ctx.closePath()
  348. // ctx.strokeStyle = '#D8D8D8';
  349. ctx.fillStyle = '#FFFFFF';
  350. // ctx.stroke()
  351. ctx.fill()
  352. },
  353. drawRoundRect(ctx, x, y, w, h, r, lineWidth) {
  354. ctx.save()
  355. //this._drawRoundRect(ctx, x, y, w, h, r)
  356. ctx.clip()
  357. // draw left border
  358. ctx.fillStyle = '#EEEEEE'
  359. if(this.sellingPoint){
  360. var y=uni.upx2px(619)
  361. }else{
  362. var y=uni.upx2px(519)
  363. }
  364. var bWidth=uni.upx2px(600)
  365. ctx.fillRect(0, y, bWidth, 2)
  366. ctx.restore()
  367. },
  368. drawRoundRectAvatar(ctx, x, y, w, h, r, imgPath) {
  369. ctx.save()
  370. this._drawRoundRect(ctx, x, y, w, h, r)
  371. ctx.clip()
  372. ctx.drawImage(imgPath, x, y, w, h)
  373. ctx.restore()
  374. },
  375. // TODO: measureText not works in App
  376. drawTextInLines(ctx, t, x, y, w, lineHeight) {
  377. const chr = t.split("")
  378. let temp = ''
  379. let row = []
  380. for (let i = 0; i < chr.length; i++) {
  381. if (ctx.measureText(temp).width < w) {
  382. //
  383. } else {
  384. row.push(temp)
  385. temp = ''
  386. }
  387. temp += chr[i]
  388. }
  389. row.push(temp)
  390. for (const i in row) {
  391. // i + 1 will be 11, 21,...
  392. ctx.fillText(row[i], x, (y + (i * 1 + 1) * lineHeight))
  393. }
  394. return row.length
  395. },
  396. // TODO: measureText not works in app
  397. drawTextInOneLine(ctx, t, x, y, w) {
  398. const chr = t.split('')
  399. let temp = ''
  400. for (let i = 0; i < chr.length; i++) {
  401. if (ctx.measureText(temp + '...').width <= w) {
  402. temp += chr[i]
  403. } else {
  404. temp = temp.substring(0, temp.length - 1)
  405. temp += '...'
  406. break
  407. }
  408. }
  409. ctx.fillText(temp, x, y)
  410. },
  411. downloadImage(url) {
  412. return new Promise((resolve, reject) => {
  413. uni.downloadFile({
  414. url: url,
  415. success: (res) => {
  416. return resolve(res)
  417. },
  418. fail: (err) => {
  419. return reject(err)
  420. }
  421. })
  422. })
  423. }
  424. }
  425. }
  426. </script>
  427. <style scoped>
  428. .box{
  429. width: 100%;
  430. height: 100vh;
  431. background: url('http://dmsphoto.66km.com.cn/thFiles/83BDAB66-DD76-4F3A-92B3-F6AF0BA57A9E.png');
  432. background-size: 100% 100%;
  433. }
  434. .downloadBtn{
  435. width: 329rpx;
  436. height: 92rpx;
  437. background: url('http://dmsphoto.66km.com.cn/thFiles/A0CF4704-69A8-4DAC-8943-75F98D1349DD.png');
  438. background-size: 100% 100%;
  439. line-height: 92rpx;
  440. text-align: center;
  441. font-size: 28rpx;
  442. font-family: PingFangSC-Medium, PingFang SC;
  443. font-weight: 500;
  444. color: #DC490A;
  445. margin: 0 auto;
  446. }
  447. </style>