文档章节

动态生成二维码并利用canvas合成出一张图片(类似海报、分享页)

o
 osc_w9s1w4o0
发布于 2019/03/29 14:27
字数 759
阅读 13
收藏 0

精选30+云产品,助力企业轻松上云!>>>

在前端开发并打算推广一个APP的时候,推广页是免不了的,而推广页的展示方式一般是给人家一个二维码,让别人自己去安装APP,这样前段任务也达到了,这次写这篇文章的原因主要还是总结一下,其中有很多不完善的地方,还是请各位指教了:-)。

为了做出一张让人满意分享页,页面上的数据有些当然是需要动态展示的,具体展示效果如下图(部分内容不便展示,见谅):

下面说下需要用到的工具,就两个:

1.能动态生成二维码的插件qrcode  2.canvas画布

因为小编用的vue框架具体引入为:

import qrcode from '@xkeshi/vue-qrcode'  

可以看到效果图上的数据展示部分一个是二维码一个是我的用户名,下面我们开始上代码。

html:

<qrcode tag="img"  id="img" :value="qrCodeUrl" :options="{ size: 120 }" name="img"></qrcode>
      <canvas id="myCanvas" width="400vw" height="711vw"></canvas>
      <img :src="newSrc" class="newImage" v-if="newSrc" id="newImage">

  

为何多加了一个空图片呢?是为了把最后合成的图片canvas变为img图片格式,这样就可以进行处理长按识别、保存图片等处理了。

js: 

created: function () {
      if (this.qrImg == '' || this.qrImg == null) {
        if (vueCookie.get('nickname')) {
          this.recommendCode = vueCookie.get('userID')
          this.nickname = vueCookie.get('nickname') + '邀您加入'
          this.qrCodeUrl = "您要存放的二维码信息"
          setTimeout(function () {
            that.drawImage()
          }, 100)
        } else {
          request.get('/ffq/user',{}).then((response) => {
            let responseData = response.data.data
            this.nickname = responseData.nickname + '邀您加入'
            let recommendCode = responseData.recommend_code
            this.recommendCode = responseData.user_id
            this.qrCodeUrl = "您要存放的二维码信息" 
            setTimeout(function () {
              that.drawImage()
            }, 100)
          }).catch((ex) => {
            this.$router.push({name: 'Login'})
          })
        }
      }
    },

上面这段代码是展示我们动态设置的二维码信息及缓存我的个人信息(这部分看个人随意添加就不注重说明了)。

下面开始就是重点了--------->>>>将背景图与生成的二维码合成展示为一张图片。

methods{
drawImage() { let canvas1 = document.getElementsByTagName('canvas')[0] let canvas2 = document.getElementById('myCanvas') let cans = document.getElementById('img') let cas1 = canvas1.getContext('2d') let cas2 = canvas2.getContext('2d') let img1 = new Image() let img2 = new Image() // img1.src = canvas1.toDataURL('images/png', 1) img1.src = cans.src; img2.src = '/static/images/qr-code.png' var that = this img2.onload = function () { cas2.drawImage(img2, 0, 0, 400, 712) cas2.font = '20px Georgia' cas2.textAlign = 'center' cas2.fillStyle = 'white'; cas2.fillText(that.nickname, 200, 630); cas2.drawImage(img1, 104, 378, 194, 194); that.newSrc = canvas2.toDataURL('images/png', 1) }
}

 首先进行下代码说明,前面定义的canvas1、canvas2是一张图片,是为了后面可以合成图片,之后隐藏的路径开始时是可以的,后来不知怎的就找不到了,预算就用了最原始的获取路径,剩下的就是作图了,当背景图加载好的时候把二维码按照位置画上去就行了,但是,我们得出的最终图片是canvas类型的,这个部分在我测试的时候长按并不会出现任何反应,最后的一行代码是我的解决方案,有其他的方案或者我有出错的地方,欢迎指教!!!。

o
粉丝 0
博文 500
码字总数 0
作品 0
私信 提问
加载中
请先登录后再评论。
mpvue开发小程序总结

一、对小程序自身的封装 1.1.wx.request()的promise封装(并发请求不能超过五个) 1.2 toast的封装 1.3 storage的封装 二、mpvue小程序采坑 2.1 vue的created钩子 所有页面的created钩子在o...

佚名001
2018/12/07
0
0
WordPress版微信小程序3.1.5版的新功能

产品的完善是无止境,每过段时间就会发现产品的新问题,使用的人越多,提的需求也会越多,我听得最多的一句话就是:如果加上某某功能就完美了。其实,完美是不存在的,每个人的视角不一样,完...

守望轩
2018/04/16
0
0
HTML5案例分享 | 2019Epub360新年精品案例盘点

律回春晖渐,万象始更新。新年虽然过去了,但它所带给我们2019年的年味却回味无穷。尤其,Epub360 H5在朋友圈以它特有的方式,传达着各大品牌的新潮年味,让我们度过新的一年。 我们为大家搜...

H5教程案例分享
2019/12/12
11
0
前端如何优雅的制作带LOGO的二维码

说在前面的话... 最近项目有个功能产品列表,可以将不同产品生成不同的二维码,扫码可以进入对应的产品详情页,同时二维码需要带公司logo,需要可以长按调起微信的下载图片的功能,其实也就是...

Color..「Blind」
2018/07/19
0
0
小程序生成海报:通过 json 配置方式轻松制作一张海报图

背景 由于我们无法将小程序直接分享到朋友圈,但分享到朋友圈的需求又很多,业界目前的做法是利用小程序的 Canvas 功能生成一张带有二维码的图片,然后引导用户下载图片到本地后再分享到朋友...

osc_j6x7mc4h
2019/10/14
9
0

没有更多内容

加载失败,请刷新页面

加载更多

macz技巧分享—macOS高端使用技巧

Macos 的占有量不如 Windows,两者之间当操作方式也有很大的不同,当很多人熱悉 Windows 的操作之后,再接触 macos,觉得难上手,其实是习惯问题。如果你学习一些技巧,会觉得 macos 其实也不...

mac小叮当
40分钟前
11
0
手把手教你如何用黑白显示器显示彩色!

来源:大数据文摘 本文约1000字,建议阅读6分钟。 本文为你介绍如何通过黑白显示器上也能显示出彩色。 原来在黑白显示器上也能显示出彩色啊!通过在监视器上覆盖拜耳滤色镜,并拼接彩色图像,...

osc_jklrr90y
40分钟前
18
0
key-value结构排序:给定一个字符串,统计每个字符出现频率,先按value降序,再按key升序

对于key-value结构的排序 第一种:lambda表达式 第二种:函数 第三种:类对()的重载,仿函数形式 #include <iostream>#include <vector>#include <unordered_map>#include <string>#in......

osc_gwtkg2dc
41分钟前
0
0
BlockChain:2020年7月10日世界人工智能大会WAIC《链智未来 赋能产业区块链主题论坛——2020全球区块链创新50强》

BlockChain:2020年7月10日世界人工智能大会WAIC《链智未来 赋能产业区块链主题论坛——2020全球区块链创新50强》 目录 世界人工智能大会WAIC《链智未来 赋能产业区块链主题论坛——2020全球...

osc_vew1u0h0
43分钟前
0
0
BlockChain:2020年7月10日世界人工智能大会WAIC《链智未来 赋能产业区块链主题论坛》(三)

BlockChain:2020年7月10日世界人工智能大会WAIC《链智未来 赋能产业区块链主题论坛》(三) 目录 2020年7月10日世界人工智能大会WAIC《链智未来 赋能产业区块链主题论坛》 演讲嘉宾 演讲内容 ...

osc_8o71811p
43分钟前
0
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部