Vue 生成海报的插件vue-canvas-poster
1.npm安装vue-canvas-posternpm i --save vue-canvas-poster2.在mian.js中引入important VueCanvasPoster from 'vue-canvas-poster'Vue.use(VueCanvasPoster)3.在需要的页面中使用<vue-canvas-poster:widthPixels="1000":paintin
·
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;
}
更多推荐
已为社区贡献8条内容
所有评论(0)