前言:需要实现一个给你,在微信小程序中生成订单的二维码,并合成包含二维码、其他网络图片、及文字的自定义图,保存到相册中。
这里先记录下二维码的生成,下一篇再说自定义图的实现
遇到的问题
原本是生成的二维码为base64图片,用drawImage绘制到canvas上,模拟器上没有问题,可以正常显示以及保存,但到了真机(android和IOS都不行)上无法显示图片
解决方法
使用组件,tki-qrcode
http://npm.taobao.org/package/tki-qrcode
// template 使用
<tki-qrcode :val="qrval" :size="qrsize" ref="qrcode"></tki-qrcode>
// script 使用
import tkiQrcode from '@/components/tki-qrcode/tki-qrcode.vue'
export default {
props: {
qrval: {// 要生成的二维码值
type: String
}
},
data() {
return {
qrsize: 120, // 二维码大小
}
},
methods: {
//生成二维码
creatQrcode() {
this.$refs.qrcode._makeCode()
}
},
components: {
tkiQrcode
}
}
这是我封装自定义图的组件中关于二维码生成的部分,还是蛮简单的,下次再讲利用canvas生成自定义图片并保存~~~
网友评论