合作
咨询
帮助
微信定制咨询 
关于微信开发中生成分享海报代码
- 作者：
- 发表时间：2019-09-16 11:38
- 来源：未知
最近微信开发中需要使用生成海报
客户的需求是是通过后台上传的商品图 生成一张宣传海报、海报有商品购买的二维码，用户长按识别二维码可跳转相关的商品购买页面
前端使用的是vue
vue使用的是“vue-qrcode”生成二维码
以下是代码实现
客户的需求是是通过后台上传的商品图 生成一张宣传海报、海报有商品购买的二维码，用户长按识别二维码可跳转相关的商品购买页面
前端使用的是vue
vue使用的是“vue-qrcode”生成二维码
以下是代码实现
<template>
<div class="pop-img">
<canvas id="myCanvas" width="750px" height="1334px" v-show="false"></canvas>
<img :src="newSrc" class="newImage " v-if="newSrc" id="newImage">
<VueQrcode v-show="false" tag="img" id="img" :value="qrCodeUrl" :options="{ width: 150 }"></VueQrcode>
<div class="loading-mask" v-if="loading">
<spinner color="#26a2ff" :size="60" type="fading-circle"></spinner>
</div>
</div>
</template>
<script>
import { Spinner } from 'mint-ui';
import VueQrcode from '@chenfengyuan/vue-qrcode';
export default {
components:{
Spinner,
VueQrcode,
},
data () {
return {
loading:false,
shareMenu:false,
i_resource:'',
data: [],
img:'',
newSrc:'',
ext:[],
qrCodeUrl:'http://',
name:'',
}
},
methods:{
getInfo(){
this.loading = true;
let id = this.$route.query.id;
ajax.post('/goods/pop',{id:id},res=>{
if(res.code == 0){
this.img = this.i_resource+res.data+'?n='+Math.floor(Math.random()*10000);
this.ext = res.ext;
this.name = res.name;
this.url = this.ext.url+'/#/goods/detail?id='+this.ext.goods_id+'&mid='+this.ext.mid;
this.makeQrCode();
}
})
},
makeQrCode(){
//生成二维码
let that = this;
this.qrCodeUrl = this.url;
setTimeout(function () {
that.drawImage()
}, 100)
},
drawImage(){
var that = this;
let canvas2 = document.getElementById('myCanvas');
canvas2.fillStyle="#fff";
let cans = document.getElementById('img');
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.setAttribute("crossOrigin",'anonymous');
img2.src = that.img;
img2.onload = function () {
cas2.drawImage(img2, 0, 0, 750, 1334)
cas2.font = '30px Arial'
cas2.textAlign = 'left'
cas2.fillStyle = '#fff';
cas2.fillText('@'+that.name+" "+"指南#", 20, 40);
cas2.drawImage(img1, 10, 1190, 150, 150);
//生成长按下载图片
that.newSrc = canvas2.toDataURL('images/png', 1)
}
this.loading = false;
},
},
created(){
this.i_resource = common.RESOURCE_URL+"/";
this.getInfo();
},
}
</script>
<style scoped>
.loading-mask{width:100%;height:100%;background:rgba(0,0,0,.3);position:fixed;top:0;left:0;z-index:1111;display:flex;justify-content:center;align-items:center;color:#fff;}
.pop-img img{
width: 100%;
height: auto;
}
</style>
上一篇：没有了 下一篇：如何辨别一家网络开发公司的实力?