H5 页面在做某个活动的时候,有两种分享方式,一种是链接分享,一种是图片分享。

链接分享的话,如果是在微信里,就可引导用户利用微信浏览器自带的分享,根据sdk设置分享标题简介链接缩略图即可。

图片分享的话,一定是要有个二维码,通过识别二维码来进去活动地址,但有时候这个地址是后端返回的,可能会变化的地址,

所以用的话肯定不能用固定的二维码,而是需要动态生成二维码,合成到分享海报上

用到的生成二维码的工具是 qrcode.js

npm install qrcode --save

合成图片展示到页面(因为要识别二维码,所以最后的展示要用 img 而不用canvas)

<template>
<div>
<img :src="final_img" class="result-img" v-if="final_img" />
<div class="result-img" v-else>
<canvas id="my_canvas" width="650" height="750">
</canvas>
</div>
</div>
</template> <script>
var QRCode = require('qrcode')
export default { data () {
return {
result_img: '',
final_img: ''
}
},
methods: {
async generateQR (text) {
return QRCode.toDataURL(text)
}
},
created () {
let that = this// 根据地址生成二维码
that.generateQR(share.location_url).then(res => {
let canvas = document.getElementById('my_canvas')
let ctx = canvas.getContext('2d')
let img1 = new Image()
let img2 = new Image()
// 处理跨域
img1.crossOrigin = 'anonymous'
img2.crossOrigin = 'anonymous'
img1.src = that.result_img // 背景图路经
img2.src = res // 生成的二维码base64
img1.onload = function () {
ctx.drawImage(img1, 0, 0, 650, 750) // 背景图载入画板
ctx.drawImage(img2, 510, 610, 120, 120)
that.final_img = canvas.toDataURL('image/jpeg', 0.5)
}
})
}
}
</script>

done

vue 把后端返回的图片和url链接生成的二维码用canvas 合成一张图片的更多相关文章

  1. c# url链接转成二维码图片,再转成byte[]二进制流,输出到前段ajax

    需要用到的 dll 添加引用 代码: //获取配置文件设置的url string urllink = ConfigurationManager.AppSettings["urllink&qu ...

  2. 把url链接转换成二维码的工具类

    import java.awt.image.BufferedImage; import java.io.File; import java.io.IOException; import java.io ...

  3. 给二维码(图片)添加文字(水印),让生成的二维码中间带logo

    <?php //生成二维码 require_once IA_ROOT . '/framework/library/qrcode/phpqrcode.php'; QRcode::png($url, ...

  4. Java 生成在线二维码 以Base64返回前端、或者写入到本地磁盘

    思路 现阶段遇到这样一个问题,在原有的产品上加入线下优惠券模式,用户领取优惠券以后,获取到一个唯一的ID作为领取凭证,但是在线下用扫码枪进行扫码的时候,总不能让人手动输入吧 于是乎就想出了一个办法,后 ...

  5. pbfunc外部函数扩展应用-直接在Datawindow中生成QR二维码,非图片方式

    利用pbfunc外部函数在Datawindow中直接生成QR二维码,非图片方式.需要注意以下面几点: Datawindow的DataObject的单位必须为像素(Pixels). Datawindow ...

  6. 用CIFilter生成QRCode二维码图片

    用CIFilter生成QRCode二维码图片 CIFilter不仅仅可以用来做滤镜,它还可以用来生成二维码. CIFilterEffect.h + CIFilterEffect.m // // CIF ...

  7. Java使用ZXing生成/解析二维码图片

    ZXing是一种开源的多格式1D/2D条形码图像处理库,在Java中的实现.重点是在手机上使用内置摄像头来扫描和解码设备上的条码,而不与服务器通信.然而,该项目也可以用于对桌面和服务器上的条形码进行编 ...

  8. 微信支付-无法识别qrcode生成的二维码图片

    1.开始使用 table方式,但是还是无法识别二维码  http://www.cnblogs.com/staticed/p/8549316.html var code_url = data.code_ ...

  9. vue生成条形码/二维码/带logo二维码

    条形码:https://blog.csdn.net/dakache11/article/details/83749410 //安装 cnpm install @xkeshi/vue-barcode / ...

随机推荐

  1. (转)微服务_.NET Core Consul服务发现与治理

    原文地址:https://www.cnblogs.com/waynechan/p/9354909.html Consul官网:https://www.consul.io Consul下载地址:http ...

  2. .NET Core入门

            .Net core MVC   如何使用 .NET Core,最基本的入行,很多博客以及官网都有的太多太多的例子,但是大部分没有人做到了真的让一个小白一步一步的去学, 我第一次接触的时 ...

  3. win10 bcdedit testsigning

    win10 bcdedit testsigning # 禁用系统完整性检查和禁用驱动签名以及进入测试签名驱动模式> bcdedit.exe /set nointegritychecks on & ...

  4. windows开机自启动的django服务

    做了一个django项目,想部署在win10的笔记本电脑上,可以开机后台自动启动.找了很多的方法.最后成功了. 参考了这个博主的内容. https://blog.csdn.net/qq_3595961 ...

  5. pandas-03 DataFrame()中的iloc和loc用法

    pandas-03 DataFrame()中的iloc和loc用法 简单的说: iloc,即index locate 用index索引进行定位,所以参数是整型,如:df.iloc[10:20, 3:5 ...

  6. php学习笔记——学习路线图记录

    PHP学习路线图 最全PHP自学指南 W3Cschool小编 2018-04-24 15:23:51 浏览数 (5381) 分享 收录专辑 对于广大零基础的PHP自学者,往往不知道如何系统的学习PHP ...

  7. selenium安装并导入pycharm

    selenium安装 1.python的pip安装,命令pip install selenium 2.检查是否成功安装 打开pycharm-->File-->Settings-->P ...

  8. python模块之json pickle

    1.json模块 功能:将其他形式的数据类型转化为json字符串类型,将json字符串转化为其他对应的数据类型 方法:json.dumps()  作用:将所有单引号变成双引号:将所有数据类型变成字符串 ...

  9. Windows解决端口被占用问题

    第一种解决方法,以8080端口为例 打开命令行输入 cmd ,输入netstat -ano 会显示所有已经在运行的端口情况.PID为进程id 输入你想要查的正在占用的端口号,netstat -ano ...

  10. SOA 架构与微服务架构的区别

    注重重用,微服务注重重写 SOA 的主要目的是为了企业各个系统更加容易地融合在一起. 微服务通常由重写一个模块开始.要把整个巨石型的应用重写是有很大的风险的,也不一定必要.我们向微服务迁移的时候通常从 ...