Vue 生成海报的插件vue-canvas-poster

1.npm安装vue-canvas-poster

npm i --save vue-canvas-poster

2.在mian.js中引入

important VueCanvasPoster from 'vue-canvas-poster'
Vue.use(VueCanvasPoster)

3.在需要的页面中使用

   <vue-canvas-poster:widthPixels="1000":painting="painting"@success="canvasSuccess"@fail="canvasFail"></vue-canvas-poster>data() {return {//分享海报的数据painting: {width: "320px",height: "520px",borderRadius: "10px",background: require("../../../public/img/hb.jpg"),views: [{type: "image",url: "",css: {top: "10px",left: "132px",width: "60px",height: "50px",},},{type: "text",text: "",css: {top: "68px",width: "325px",maxLines: 1,textAlign: "center",fontSize: "26px",},},{type: "text",text:"",css: {top: "155px",left: "47px",width: "225px",maxLines: 1,textAlign: "center",fontSize: "14px",maxLines: "2",lineHeight: "20px",},},{type: "image",url:"",css: {top: "210px",left: "50px",width: "220px",height: "190px",},},{type: "qrcode",content:"",css: {bottom: "31px",left: "36px",color: "#000",background: "#fff",width: "60px",height: "60px",borderWidth: "5px",borderColor: "#fff",},},],},posterImg: "", //生成的海报图片路径},
}methods: {// 成功生成海报canvasSuccess(src) {this.posterImg = src; //生成是base64格式的图片},// 无法生成海报canvasFail(err) {alert(err);},
}
handleChangeImg(){//海报 图片内容修改//商城 Logo//这里需要注意下图片不支持http开头,支持https，我是手动改成https开头的this.painting.views[0].url =localStorage.getItem("indexLogoUrl").slice(0, 4) +"s" +localStorage.getItem("indexLogoUrl").slice(4);//商城名字this.painting.views[1].text = localStorage.getItem("mallName");//商品名字this.painting.views[2].text = this.details.goodsName;//商品图片路径var newStr =this.details.goodsImgs[0].imgUrl.slice(0, 4) +"s" +this.details.goodsImgs[0].imgUrl.slice(4);this.painting.views[3].url = newStr;//商品路径var url = window.location.href;this.painting.views[4].content = url;
}

Vue 生成海报的插件vue-canvas-poster相关推荐

vue使用html2canvas截取div内容生成海报~ vue生成海报
最近项目有需求需要把生成海报.就在网上查了一些资源记录一下. 首先就是下载依赖了.老规矩: npm i html2canvas 然后在需要的组件里面引用: import html2canvas fro ...
小程序php生成海报,小程序用canvas绘制海报的做法
2020年第一篇文章,年初忙着复习刷题一直没空去写东西,书看的越多感觉越技不如人,始终徘徊在小菜鸡的行列中,最近项目里正好有一个canvas的业务,突然又燃起了我一个UI前端的火种,记下了踩坑和思考. ...
vue生成html页面,前端VUE页面快速生成
VSCode左下角设置图标 ==> 用户代码片段 ==> 搜索 vue.json ==> 回车复制粘贴以下代码 {//Place your snippets for vu ...
vue生成海报（vue-canvas-poster）
安装 vue-canvas-poster 插件 npm i --save vue-canvas-poster 封装成组件(微信长按保存图片) <template><div class ...
Vue 生成海报图的方法
UI给了一张背景图, 需要根据接口返回的数据,将数据填充到背景图中,然后让用户可以通过长按海报转发给朋友. 步骤: 1. 使用了绝对定位的方式,将数据内容,定位到背景图相应的位置 2. 添加依赖 ...
vue 生成海报完整代码, (包括远程图片转base64、html2canvas 在IOS系统兼容的解决办法)
最终效果: 1. html结构分为3部分:最终的海报图 + 内容布局 + 保存提示文字(可忽略) <template><section><img :src="f ...
【Vue】Vue生成二维码 Vue把url地址生成二维码手机打开扫一扫手机端打开实战案例 vue生成二维码
代码 npm install qrcodejs2 --save 代码引入到项目中,不需要再main.js做处理,只需要在使用的vue页面中引入. 在页面中使用 <template>< ...
vue使用富文本插件vue elemnt-tiptap和vue-quill-editor
这两天由于项目要实现新闻发布的功能,所以上github和gitee找了一些项目,发现都是用富文本插件编译成html来实现功能.经过尝试和寻找,我使用了vue elemnt-tiptap和vue-qui ...
Vue获取当前的实时时间+Vue生成计数器
Vue获取当前的实时时间+Vue生成计数器如何使用vue获取当前的实时时间,可以通过**Date():**函数获取当前的时间,但是只能获取当前这一秒的时间,所以需要给他一个延时,每一秒让他刷新一次, ...

Vue 生成海报的插件vue-canvas-poster

1.npm安装vue-canvas-poster

2.在mian.js中引入

3.在需要的页面中使用

Vue 生成海报的插件vue-canvas-poster相关推荐

最新文章

热门文章