插件：Vue Canvas Poster

网址:Vue Canvas Poster

1、安装

cnpm i vue-canvas-poster --save

2、使用

<template><div class="share wh100"><navBar title="邀请好友" :leftArrowFlag="true" /><div class="content"><h2>邀请亲友加入亲友团</h2><p>邀请亲友加入后，可与您一起编写逝者生平故事，留言、上传照片、跟您一起完善逝者信息、共同缅怀</p><div class="share_item"><h3>方法一：长按海报发送朋友邀请加入</h3><div class="item_content"><vue-canvas-poster:widthPixels="1000":painting="painting"@success="success"@fail="fail"></vue-canvas-poster><div class="poster_box"><img v-if="showPoster" class="poster_img" :src="detail.posterImg" alt="" /></div></div></div><div class="share_item"><h3>方法二：点击发送链接邀请亲朋加入</h3><div class="item_content"><div class="large_btn" @click="wxShare"><span>点击发送链接邀请亲朋加入</span></div></div></div></div><van-overlay class="overlay_box" :show="show" @click="show = false"><div class="mask_content"  @click="show = false"><img class="arrow" src="http://****/files/app/download/pic/arrow.png" alt=""><div class="mask_main"><div class="main_item"><div class="item_tip"><span>1</span></div><div class="item_test"><span>点击右上角</span><div class="item_btn"><span>. . .</span></div><span>按钮</span></div></div><div class="main_item"><div class="item_tip"><span>2</span></div><div class="item_test"><span>将本页面分享给好友</span></div></div></div></div></van-overlay></div>
</template>

<script>
import navBar from "@/components/navBar";
import { VueCanvasPoster } from "vue-canvas-poster";
import sdk from "@/utils/wxShare"
import {getShareData} from '@/api/memorialHall'
export default {data() {return {painting:null,showPoster:false,show:false,//显示隐藏detail: {posterImg:null},};},components: {navBar,VueCanvasPoster,},created() {console.log(this.detail.posterImg, "分享");this.getData(this.$route.params.id)},mounted() {},methods: {async getData(id) {let params={id}let res= await getShareData(params)console.log(res,'000')if(res.code!='2000'){this.$toast.fail(res.msg)return }this.detail=res.data;this.ininShare(res.data)this.initPoster(res.data)},ininShare(data){var ua = window.navigator.userAgent.toLowerCase();if (ua.match(/MicroMessenger/i) == 'micromessenger') {let obj={title: `${data.deadName}的纪念馆`,des:`${data. biography}`,linkurl: `http://**************/memorialHall/${data.id}`,//分享链接img: `${data.deadPortraitUrl}`,  }// let url = encodeURIComponent(location.href.split('#')[0]);let url = location.href.split('#')[0];sdk.getJSSDK(url, obj)}else{}},initPoster(data){this.painting = {width: "275px",height: "365px",borderRadius: "5px",background: `${data.captionUrl}`,views: [{type: "image",url: `${data.deadPortraitUrl}`,css: {top: "20px",left: "107.5px",borderRadius: "30px",width: "60px",height: "60px",},},{type: "text",text: `${data.deadName}的纪念馆`,css: {top: "90px",fontSize: "14px",left: "90px",color: "#fff",textAlign: "center",},},{type: "text",text: `${data.birthday}-${data.deathday}`,css: {top: "110px",fontSize: "14px",left: "60px",color: "#fff",textAlign: "center",},},{type: "qrcode",content: `http://****/memorialHall/${data.id}`,css: {background: "#fff",padding: "10px",width: "100px",height: "100px",left: "90px",top: "170px",borderWidth: "10px",borderRadius: "1px",borderColor: "#fff",},},{type: "text",text: "扫码查看在线纪念馆",css: {bottom: "50px",fontSize: "14px",left: "80px",color: "#fff",textAlign: "center",},},],};},success(src) {this.detail.posterImg = src;this.showPoster=true},fail(err) {console.log("fail", err);},wxShare(){this.show=true}},
};
</script>

<style lang="scss" scoped>
.share {display: flex;flex-direction: column;.content {flex: 1;padding: 0.12rem 0.37rem;// background-color: #3e3e3e;h2 {font-size: 16px;line-height: 0.23rem;font-weight: 600;margin-bottom: 0.07rem;}p {font-size: 14px;line-height: 0.2rem;color: $lightBlack;margin-bottom: 0.05rem;}.share_item {margin-bottom: 0.1rem;h3 {font-size: 16px;line-height: 0.23rem;font-weight: 600;margin-bottom: 0.07rem;}.item_content {display: flex;flex-direction: column;align-items: center;.poster_box {width: 2.75rem;height: 3.65rem;img{width: 100%;height: 100%;}}}}}
}
.overlay_box{.mask_content{padding:1rem 0.5rem;font-size: 14px;color: #fff;}.main_item{display: flex;align-items: center;margin-bottom: 0.2rem;}.item_test{display: flex;align-items: center;}.item_tip{width: 0.2rem;height: 0.2rem;border-radius: 50%;background: crimson;text-align: center;line-height: 0.2rem;margin-right: 0.15rem;}.item_btn{padding:0.05rem 0.1rem;text-align: center;height: 0.3rem;background: #282D32;border-radius: 0.05rem;margin:0 0.1rem;}.item_btn span{line-height: 0.2rem;}.arrow{position: absolute;right:0.2rem;top:0.2rem;display: block;width: 1rem;z-index: 6;}
}
</style>

wxShare.js

import {wxSignatureVerification} from '@/api/wx'
import {Toast} from 'vant'
//import wx from 'weixin-js-sdk';
import wx from 'weixin-jsapi';
////要用到微信API
function getJSSDK(url,shareData) {let params={url}console.log(wx,params,'url参数')wxSignatureVerification(params).then(res => {console.log('22222',res,shareData);if(res.code!='2000')return Toast.fail('微信验签失败')let result=res.data.wxConfigwx.config({debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。appId: res.data.appId, // 必填，公众号的唯一标识timestamp: result.timestamp, // 必填，生成签名的时间戳nonceStr: result.nonceStr, // 必填，生成签名的随机串signature: result.signature, // 必填，签名jsApiList:['onMenuShareTimeline', 'onMenuShareAppMessage'] })wx.ready(function () {//分享给微信朋友wx.onMenuShareAppMessage({title: shareData.title,desc: shareData.des,link: shareData.linkurl,imgUrl: shareData.img,success: function success(res) {Toast.success('分享成功')},cancel: function cancel(res) {console.log('已取消');},fail: function fail(res) {//alert(JSON.stringify(res));}});// 2.2 监听“分享到朋友圈”按钮点击、自定义分享内容及分享结果接口wx.onMenuShareTimeline({title: shareData.title,link: shareData.linkurl,imgUrl: shareData.img,success: function success(res) {//alert('已分享');},cancel: function cancel(res) {//alert('已取消');},fail: function fail(res) {//alert(JSON.stringify(res));}});// 2.3 监听“分享到QQ”按钮点击、自定义分享内容及分享结果接口//   wx.onMenuShareQQ({//     title: shareData.title,//     desc: shareData.desc,//     link: shareData.linkurl,//     imgUrl: shareData.img,//     trigger: function trigger(res) {//       //alert('用户点击分享到QQ');//     },//     complete: function complete(res) {//       alert(JSON.stringify(res));//     },//     success: function success(res) {//       //alert('已分享');//     },//     cancel: function cancel(res) {//       //alert('已取消');//     },//     fail: function fail(res) {//       //alert(JSON.stringify(res));//     }//   });// 2.4 监听“分享到微博”按钮点击、自定义分享内容及分享结果接口//   wx.onMenuShareWeibo({//     title: shareData.title,//     desc: shareData.desc,//     link: shareData.linkurl,//     imgUrl: shareData.img,//     trigger: function trigger(res) {//       //alert('用户点击分享到微博');//     },//     complete: function complete(res) {//       // alert(JSON.stringify(res));//     },//     success: function success(res) {//       //alert('已分享');//     },//     cancel: function cancel(res) {//       // alert('已取消');//     },//     fail: function fail(res) {//     // alert(JSON.stringify(res));//     }//   });})wx.error(function (res) {//alert("微信验证失败");});})
}
export default {// 获取JSSDKgetJSSDK
}

备注

该方案生成的海报二维码在IOS上扫描报错，所以更改方案：生成二维码图片之后在用二维码图片绘制到海报上生成海报

更改后代码：

<template><div class="share wh100"><navBar title="邀请好友" :leftArrowFlag="true" /><div class="content"><h2>邀请亲友加入亲友团</h2><p>邀请亲友加入后，可与您一起编写逝者生平故事，留言、上传照片、跟您一起完善逝者信息、共同缅怀</p><div class="share_item"><h3>方法一：长按海报发送朋友邀请加入</h3><div class="item_content"><vue-canvas-poster:widthPixels="1000":painting="painting"@success="success"@fail="fail"></vue-canvas-poster><div class="poster_box"><imgv-if="showPoster"class="poster_img":src="detail.posterImg"alt=""/></div></div></div><div class="share_item"><h3>方法二：点击发送链接邀请亲朋加入</h3><div class="item_content"><div class="large_btn" @click="wxShare"><span>点击发送链接邀请亲朋加入</span></div></div></div></div><van-overlay class="overlay_box" :show="show" @click="show = false"><div class="mask_content" @click="show = false"><imgclass="arrow"src="http://linyiapi.fushoubainian.com/files/app/download/pic/arrow.png"alt=""/><div class="mask_main"><div class="main_item"><div class="item_tip"><span>1</span></div><div class="item_test"><span>点击右上角</span><div class="item_btn"><span>. . .</span></div><span>按钮</span></div></div><div class="main_item"><div class="item_tip"><span>2</span></div><div class="item_test"><span>将本页面分享给好友</span></div></div></div></div></van-overlay><div id="qrcode"></div></div>
</template><script>
import navBar from "@/components/navBar";
import { VueCanvasPoster } from "vue-canvas-poster";
import sdk from "@/utils/wxShare";
import { getShareData } from "@/api/memorialHall";
import QRCode from "qrcodejs2";
export default {data() {return {loading: null,painting: null,qrcode: "", //二维码defaultAvatar: require("@/assets/imgs/avatar.png"),showPoster: false,show: false, //显示隐藏detail: {posterImg: null,},};},components: {navBar,VueCanvasPoster,},created() {console.log(this.detail.posterImg, "分享");this.getData(this.$route.params.id);},mounted() {var ua = window.navigator.userAgent.toLowerCase();if (ua.match(/MicroMessenger/i) == "micromessenger") {var u = navigator.userAgent,app = navigator.appVersion;var isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端if (isIOS) {if (window.location.href.indexOf("#reloaded") == -1) {window.location.href = window.location.href + "#reloaded";window.location.reload();}}}},methods: {getCodeSrc(link) {return new Promise((resolve, reject) => {document.getElementById("qrcode").innerHTML = "";this.qrcode = new QRCode("qrcode", {width: 124,height: 124, // 高度text: link, // 二维码内容// render: 'canvas' ,   // 设置渲染方式（有两种方式 table和canvas，默认是canvas）// background: '#f0f',   // 背景色// foreground: '#ff0'    // 前景色});console.log(this.qrcode, "kkkk");var canvas = this.qrcode._oDrawing._elCanvas;//如果有循环,此句必不可少 qrcode.find('canvas').remove();var src = canvas.toDataURL("image/jpg");resolve(src);});},async getData(id) {let params = {id,};let res = await getShareData(params);if (res.code != "2000") {this.$toast.fail(res.msg || "数据请求失败");return;}this.detail = res.data;this.initPoster(res.data);},ininShare(data) {var ua = window.navigator.userAgent.toLowerCase();if (ua.match(/MicroMessenger/i) == "micromessenger") {let obj = {title: `${data.deadName}的纪念馆`,des: `${data.biography}`,linkurl: `http://*****/memorialHall/${data.id}`, //分享链接img: `${data.deadPortraitUrl}`,};// let url = encodeURIComponent(location.href.split('#')[0]);let url = location.href.split("#")[0];sdk.getJSSDK(url, obj);} else {}},initPoster(data) {this.loading = this.$toast.loading({message: "加载中...",forbidClick: true,});this.getCodeSrc(`http://*****/memorialHall/${data.id}`).then((res) => {this.painting = {width: "300px",height: "400px",borderRadius: "5px",background: `${data.captionUrl}`,views: [{type: "image",url: data.deadPortraitUrl? `${data.deadPortraitUrl}`: this.defaultAvatar,css: {top: "20px",left: "120px",borderRadius: "30px",width: "60px",height: "60px",},},{type: "text",text: `${data.deadName}的纪念馆`,css: {top: "90px",fontSize: "14px",left: "105px",color: "#fff",textAlign: "center",},},{type: "text",text: `${data.birthday}—${data.deathday}`,css: {top: "120px",fontSize: "14px",left: "70px",color: "#fff",textAlign: "center",},},{type: "image",url: res,css: {background: "#fff",top: "250px",left: "100px",width: "100px",height: "100px",borderWidth: "6px",borderRadius: "1px",borderColor: "#fff",},},// {//   type: "qrcode",//   content: `http://****/memorialHall/${data.id}`,//   css: {//     background: "#fff",//     width: "100px",//     height: "100px",//     left: "100px",//     top: "210px",//     borderWidth: "10px",//     borderRadius: "1px",//     borderColor: "#fff",//   },// },{type: "text",text: "扫码查看在线纪念馆",css: {bottom: "20px",fontSize: "14px",left: "90px",color: "#fff",textAlign: "center",},},],};});},success(src) {console.log(src, "哈哈哈哈");this.$toast.clear();this.detail.posterImg = src;this.showPoster = true;},fail(err) {console.log("fail", err);},wxShare() {this.show = true;},},
};
</script>
<style lang="scss" scoped>
.share {display: -webkit-box;display: -moz-box;display: -ms-flexbox;display: -webkit-flex;display: flex;-moz-flex-direction: column;-webkit-flex-direction: column;flex-direction: column;#qrcode {display: none;}.content {flex: 1;padding: 0.05rem 0.37rem;// background-color: #3e3e3e;overflow-y: scroll;h2 {font-size: 14px;line-height: 0.2rem;font-weight: 600;margin-bottom: 0.07rem;}p {font-size: 14px;line-height: 0.2rem;color: $lightBlack;margin-bottom: 0.05rem;}.share_item {margin-bottom: 0.1rem;h3 {font-size: 14px;line-height: 0.2rem;font-weight: 600;margin-bottom: 0.07rem;}.item_content {display: -webkit-box;display: -moz-box;display: -ms-flexbox;display: -webkit-flex;display: flex;-moz-flex-direction: column;-webkit-flex-direction: column;flex-direction: column;-moz-align-items: center;-webkit-align-items: center;align-items: center;.poster_box {width: 3rem;height: 4rem;img {width: 100%;height: 100%;}}}}}
}
.overlay_box {.mask_content {padding: 1rem 0.5rem;font-size: 14px;color: #fff;}.main_item {display: -webkit-box;display: -moz-box;display: -ms-flexbox;display: -webkit-flex;display: flex;-moz-align-items: center;-webkit-align-items: center;align-items: center;margin-bottom: 0.2rem;}.item_test {display: -webkit-box;display: -moz-box;display: -ms-flexbox;display: -webkit-flex;display: flex;-moz-align-items: center;-webkit-align-items: center;align-items: center;}.item_tip {width: 0.2rem;height: 0.2rem;border-radius: 50%;background: crimson;text-align: center;line-height: 0.2rem;margin-right: 0.15rem;}.item_btn {padding: 0.05rem 0.1rem;text-align: center;height: 0.3rem;background: #282d32;border-radius: 0.05rem;margin: 0 0.1rem;}.item_btn span {line-height: 0.2rem;}.arrow {position: absolute;right: 0.2rem;top: 0.2rem;display: block;width: 1rem;z-index: 6;}
}
</style>

图片跨域

1.如果图片在你自己的服务器上，配置 nginx

location / {add_header Access-Control-Allow-Origin *;add_header Access-Control-Allow-Headers "Origin, X-Requested-With, Content-Type, Accept";add_header Access-Control-Allow-Methods "GET, POST, OPTIONS";add_header Access-Control-Allow-Credentials "true";if ($request_method = "OPTIONS") {add_header Access-Control-Allow-Origin *;add_header Access-Control-Allow-Methods "GET, POST, OPTIONS";return 204;}}
location ~ .*\.(gif|jpg|jpeg|png|bmp|swf)${add_header Access-Control-Allow-Origin *;expires      30d;error_log off;access_log /dev/null;}

vue 生成二维码海报并进行微信分享相关推荐

VUE微信H5生成二维码海报保存在本地相册
VUE微信H5生成二维码海报保存在本地相册一.效果二.说明公司需求:宣传海报从后台获取,二维码地址也从后台获得,然后生成一个海报,海报上固定位置放二维码,长按图片可以保存在本地相册(其实前面的需 ...
小程序如何生成二维码海报？
在小程序开发完成之后,我们会时常遇到这样的一个问题,小程序该怎么推广,增加曝光量,让更多的人看到?我们都知道,小程序推广一般是给小程序增加一个分享的功能,可以分享到群里面. 但是不能发朋友圈,若是想发 ...
微信公众平台生成二维码海报是如何做到的？
实现微信公众号里面点击子菜单生成带有粉丝二维码的海报关注微信服务号自动生成二维码海报发送关键词到公众号生成带有粉丝头像昵称的海报二维码 1.从微号帮平台我的公众号功能管理 2.生成海报二维码海 ...
利用VUE生成二维码（两种方式）
利用Vue生成二维码 Author:kak vue有两种生成二维码的方式,qrcode.vue-qr(有icon): 1.qrcode npm ``install` `--save qrcodejs2 ...
Vue生成二维码，自定义插入图片生成logo
Vue生成二维码,自定义插入图片生成logo vue-qr是一个很棒的制作二维码开源库,github地址:https://github.com/Binaryify/vue-qr 1.安装vue-qr ...
vue使用qrcodejs2生成带log的二维码图片，vue生成二维码图片中间带log，自定义log
安装插件 npm install qrcodejs2 --save 在页面中引入 import QRcode from 'qrcodejs2' 普通的二维码此处的id就是页面中要展示二维码容器的id ...
vue生成二维码并下载
vue生成二维码图片,这里使用的是qrcode.js 这个插件 1.下载插件 npm install --save qrcodejs2 2.组件内使用 <template> <B ...
【Vue】Vue生成二维码 Vue把url地址生成二维码手机打开扫一扫手机端打开实战案例 vue生成二维码
代码 npm install qrcodejs2 --save 代码引入到项目中,不需要再main.js做处理,只需要在使用的vue页面中引入. 在页面中使用 <template>< ...
Spring Boot项目使用Graphics2D 生成二维码海报图片流返回给前端
这里写自定义目录标题前言生成图片最后效果(省略公司logo) 代码开发中遇到的坑 1.通过Postman能够获取出海报图片,但是前端获取是获取不到前言需求是生成二维码分享海报,作为学生加入班 ...

vue 生成二维码海报并进行微信分享

备注

vue 生成二维码海报并进行微信分享相关推荐

最新文章

热门文章