组件：tki-qrcode.vue 交流群：836383650
<template> <view class="content"> <button type="primary" @tap="saveToAlbum">保存</button> <view class="post"> <tki-qrcode ref="qrcode" :val="val" :size="200" background="#fff" foreground="#000" pdground="#000" :onval="false" :loadMake="false" @result="qrR" :show="false"></tki-qrcode> <view class="wrapper"><canvas style="height: 100%;width: 100%;backgroundColor: #FFFFFF" canvas-id="firstCanvas"></canvas></view> </view> </view> </template> <script> import tkiQrcode from '@/components/tki-qrcode/tki-qrcode.vue'; export default { name: 'canvas-drawer', components: { tkiQrcode }, data() { return { val: 'https://www.baidu.com', cover: '../../static/cabin01.png' }; }, onLoad() {}, methods: { qrR(path) { let that = this; this.qr_path = path; let system_info = uni.getSystemInfoSync(); let ctx = uni.createCanvasContext('firstCanvas'); uni.getImageInfo({ src: that.cover, success(res) { console.log(res.path); ctx.drawImage(res.path, 0, 0, 375, uni.upx2px(1020)); let linearGrad = ctx.createLinearGradient(0, 0, 800, 0); linearGrad.addColorStop('0.25', '#8b00d2'); linearGrad.addColorStop('0.5', '#003fb3'); linearGrad.addColorStop('0.75', '#ff3ef0'); ctx.fillStyle = '#FFFFFF'; ctx.fillRect(uni.upx2px(500), uni.upx2px(790), uni.upx2px(200), uni.upx2px(210)); ctx.drawImage(path, uni.upx2px(520), uni.upx2px(800), uni.upx2px(160), uni.upx2px(160)); ctx.font = '13px Arial'; ctx.fillStyle = '#000'; ctx.fillText('长按保存二维码', uni.upx2px(508), uni.upx2px(990)); ctx.draw(false, () => { uni.canvasToTempFilePath({ x: 0, y: 0, width: 375, height: uni.upx2px(1020), destWidth: 375, destHeight: uni.upx2px(1020), canvasId: 'firstCanvas', success: function(res) { uni.saveImageToPhotosAlbum({ filePath: res.tempFilePath, success: function() { console.log('save success'); } }); }, fail(e) { console.log(e); uni.showToast({ title: '生成海报失败', icon: 'none' }); } }); }); }, fail(error) { console.log(error); } }); }, saveToAlbum() { this.$refs.qrcode._makeCode(); } } }; </script> <style lang="scss"> .post { height: 100%; background-color: #f4f4f4; .wrapper { height: 1020rpx; display: flex; justify-content: center; align-items: center; margin-top: 50upx; } } </style>
