vue生成海报（vue-canvas-poster）

安装 vue-canvas-poster 插件

npm i --save vue-canvas-poster

封装成组件（微信长按保存图片）

<template><div class="talent_poster"><vue-canvas-poster:widthPixels="1000":painting="painting"@success="canvasSuccess"@fail="canvasFail"></vue-canvas-poster><img :src="posterImg" /><div class="tipTxt">长按保存或分享</div><!--关闭--><div style="width: 100%; text-align: center"><div class="cancleBtn" @click="$emit('hideposter')"><span id="close"></span></div></div></div>
</template>
<script>
import wx from "weixin-js-sdk";
export default {middleware: "",props: {},components: {},data() {return {showPoster: true,posterImg: "", //生成的海报painting: {width: "750px",height: "1168px",background: "",views: [{type: "qrcode",content: "",background: "transparent",css: {bottom: "350px",left: "0",right: "275px",color: "#000",background: "#fff",width: "0px",height: "0px",borderWidth: "10px",borderColor: "#fff",},},{type: "text",text: "",css: {top: "36%",right: "13.5%",width: "325px",maxLines: 1,textAlign: "center",fontSize: "70px",color: "#0068B7",},},{type: "text",text: "",css: {top: "44%",right: "13.5%",width: "325px",maxLines: 1,textAlign: "center",fontSize: "70px",color: "#0068B7",},},],},};},created() {},methods: {open(item) {if (item.paintingWidth || item.paintingHeight) {this.painting.width = item.paintingWidth;this.painting.height = item.paintingHeight;}this.painting.background = item.bgImg;this.painting.views[0].content = item.codeUrl;this.painting.views[0].css = item.css;if (item.textObj) {this.painting.views[1].text = item.textObj.txt1;this.painting.views[2].text = item.textObj.txt2;}},canvasSuccess(src) {this.posterImg = src;},canvasFail(err) {alert(err);},saveImg() {wx.saveImageToPhotosAlbum({filePath: this.posterImg,success(res) {},fail(err) {console.log(err);},});},},
};
</script>
<style lang="less" scoped>
.talent_poster {position: fixed;width: 80%;top: 50%;left: 50%;z-index: 999;transform: translate(-50%, -50%);margin: 0 auto;img {width: 100%;height: 100%;margin-bottom: 10px;}.tipTxt {text-align: center;color: #ccc;}
}
</style>

使用组件

let data = {paintingWidth: '816px',paintingHeight: '1219px',bgImg:‘’,codeUrl:‘’,//网页地址css: {bottom: '14.5%',left: '0',right: '34.5%',width: '260px',height: '260px',},
}
this.$refs.invitePoster.open(data)

效果

vue生成海报（vue-canvas-poster）相关推荐

Vue 生成海报的插件vue-canvas-poster
1.npm安装vue-canvas-poster npm i --save vue-canvas-poster 2.在mian.js中引入 important VueCanvasPoster from ...
vue使用html2canvas截取div内容生成海报~ vue生成海报
最近项目有需求需要把生成海报.就在网上查了一些资源记录一下. 首先就是下载依赖了.老规矩: npm i html2canvas 然后在需要的组件里面引用: import html2canvas fro ...
Vue 生成海报图的方法
UI给了一张背景图, 需要根据接口返回的数据,将数据填充到背景图中,然后让用户可以通过长按海报转发给朋友. 步骤: 1. 使用了绝对定位的方式,将数据内容,定位到背景图相应的位置 2. 添加依赖 ...
vue 生成海报完整代码, (包括远程图片转base64、html2canvas 在IOS系统兼容的解决办法)
最终效果: 1. html结构分为3部分:最终的海报图 + 内容布局 + 保存提示文字(可忽略) <template><section><img :src="f ...
【微信小程序-原生开发】实用教程20 - 生成海报（实战范例为生成活动海报，内含生成指定页面的小程序二维码，保存图片到手机，canvas 系列教程）
可在系列教程的基础上继续开发,也可以单独使用 [微信小程序-原生开发]系列教程效果预览代码实现点击触发生成海报在活动详情页,指定点击某图标/按钮,触发跳转到生成海报的页面 pages\comp ...
微信小程序-运用painter插件生成海报分享朋友圈--比canvas好用
微信小程序-运用painter插件生成海报–比canvas好用先放插件地址:https://github.com/Kujiale-Mobile/Painter 还有个可视化把海报生成代码的地址:ht ...
html2canvas生成海报的各种问题
html2canvas (一)官网下载安装 (二)基础用法 (三)生成海报问题 canvas高分屏下的模糊问题 html2canvas图片模糊问题 canvas图片getImageData,toDat ...
微信小程序之生成海报保存本地
知识都在代码里 index.wxml <view class="canvas-box"><button bindtap="generate"& ...
vue中如何使用canvas循环生成多张海报？
一. 需求背景长按分享图片,图片中含有自己分享链接生成的二维码,需要把二维码和背景图合成一张海报,项目需求是循环生成多张海报二. canvas画布的生成条件要生成画布的html元素不能是隐藏状态 ...

vue生成海报（vue-canvas-poster）

vue生成海报（vue-canvas-poster）相关推荐

最新文章

热门文章