vue-canvas-poster
vue 组件-简单属性画 Canvas 图
github
一个通过 css 属性画 canvas 图片的轻量级的 vue 组件
(A lightweight vue components use canvas draw image by css properties.)
具有如下特性:
绘制文本(换行、超出内容省略号、中划线、下划线、文本加粗)
绘制图片(圆角、旋转)
绘制矩形(圆角、旋转)
绘制二维码
生成效果 扫码体验上线效果 安装 通过 npm 安装# npm npm i vue-canvas-poster --save使用组件
template
import vueCanvasPoster from "vue-canvas-poster" components: { vueCanvasPoster } // or Global Install import Vue from "vue" import vueCanvasPoster from "vue-canvas-poster" Vue.use(vueCanvasPoster)
{ width: 550, height: 876, views: [ { type: "rect", top: 0, left: 0, background: "#f4f5f7", width: 550, height: 876 }, { type: "image", url: "https://avatars0.githubusercontent.com/u/35954879?s=460&v=4", left: 36, top: 20, width: 80, height: 80, radius: 40 }, { type: "text", content: "乖摸摸头的小店", fontSize: 26, bolder: true, top: 48, left: 136, width: 360, breakWord: true, MaxLineNumber: 1, }, { type: "rect", top: 120, left: 12, background: "#FFFFFF", width: 526, height: 540, radius: 10 }, // 本地图片 { type: "image", url: require("./assets/1.jpg"), left: 25, top: 150, width: 332, height: 332, }, // 网络图片 { type: "image", url: "https://tgoods.top1buyer.com/res/testfile/imgs/20190702180744/MR9600-Pink/2.jpg", left: 364, top: 150, width: 160, height: 160 }, { type: "image", url: "https://tgoods.top1buyer.com/res/testfile/imgs/20190702180744/MR9600-Pink/3.jpg", left: 364, top: 320, width: 160, height: 160 }, { type: "text", content: `18987、安奈儿童装上衣条纹童装上衣条纹童装上衣 条纹童装上衣`, color: "#666666", fontSize: 22, top: 507, left: 25, width: 450, lineHeight: 33, MaxLineNumber: 2, breakWord: true }, { type: "text", content: `劲爆价:`, fontSize: 24, top: 608, left: 26, }, { type: "text", content: `¥39.00`, color: "#E5463E", fontSize: 36, border: true, top: 601, left: 116 }, { type: "text", content: `¥259.00`, color: "#999999", fontSize: 26, border: true, top: 609, left: 243, textDecoration: "line-through" }, { type: "rect", top: 647, left: 439, background: "#fff", width: 28, height: 28, deg: 45 }, { type: "text", content: `长按或扫描二维码`, fontSize: 18, color: "#999999", top: 829, left: 385 }, // 本地图片 { type: "image", url: require("./assets/slogen.png"), left: 26, top: 821, width: 218, height: 24 }, { type: "qrcode", content: "https://github.com/sunnie1992/vue_canvas_poster", background: "#fff", color: "#000", left: 392, top: 690, width: 130, height: 130 }, ] }组件参数解释
字段 | 类型 | 必填 | 描述 |
---|---|---|---|
width | Number | 是 | 画布宽度 |
height | Number | 是 | 画布高度 |
views | Object Array(对象数组) | 是 | 看下文 |
字段名 | 类型 | 默认值 | 描述 |
---|---|---|---|
top | Number | 0 | 距离顶部的距离 |
left | Number | 0 | 距离左侧的距离 |
width | Number | 0 | 宽度 |
height | Number | 0 | 高度 |
background | String | "white" | 背景颜色 |
radius | Number | 0 | 圆角 |
deg | Number | 0 | 旋转角度 (目前不能跟 radius 一起用) |
字段名 | 类型 | 默认值 | 描述 |
---|---|---|---|
top | Number | 0 | 距离顶部的距离 |
left | Number | 0 | 距离左侧的距离 |
content | String | "" | 文本内容 |
fontSize | Number | 0 | 文字大小 |
color | String | black | 颜色 |
lineHeight | Number | 20 | 行高,多行起作用 |
breakWord | Boolean | false | 换行 |
MaxLineNumber | Int | 2 | 根据宽度换行 ,需要设置 breakWord: true ,超出行隐藏显示为... |
width | Number | 文本宽度 | |
bolder | String | false | 加粗 |
textDecoration | String | none | underline(下划线)、line-through(贯穿线) |
字段 | 类型 | 默认值 | 描述 |
---|---|---|---|
top | Number | 0 | 距离顶部的距离 |
left | Number | 0 | 距离左侧的距离 |
url | String | "" | 图片地址,也支持本地图片如:/images/1.jpeg |
width | Number | 0 | 宽度 |
height | Number | 0 | 高度 |
radius | Number | 0 | 圆角 |
deg | Number | 0 | 旋转角度 (目前不能跟 radius 一起用) |
字段 | 类型 | 默认值 | 描述 |
---|---|---|---|
top | Number | 0 | 距离顶部的距离 |
left | Number | 0 | 距离左侧的距离 |
content | String | "" | 链接地址 |
width | Number | 0 | 宽度 |
height | Number | 0 | 高度 |
background | String | "" | 背景色 |
color | String | black | 二维码颜色 |
返回生成 base64 图片的本地 url,设置 src
methods: { success(src) { // 设置img的src this.src = src } }fail
返回失败信息
fail(err) { console.log("fail", err) }问题反馈
有什么问题可以提 issue 或扫描微信二维码跟我联系
提 issue
关于我您可以扫描添加下方的微信并备注 Sol 加交流群,给我提意见,交流学习。
如果对你有帮助送我一颗小星星(づ ̄3 ̄)づ╭❤~
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/106411.html
摘要:啦啦啦,首先说下需求,产品想让用户在我们内,分享一张图片到微信等平台。图片中包含用户的姓名头像和带着自己信息的二维码。然后,如何生成这张海报呢首先我们老大告诉我有一个插件叫其作用就是可以将节点转化成图片,是个不错的东西。 啦啦啦,首先说下需求,产品想让用户在我们app内,分享一张图片到微信、qq等平台。图片中包含用户的姓名、头像、和带着自己信息的二维码。然后,如何生成这张海报呢~~~首...
摘要:啦啦啦,首先说下需求,产品想让用户在我们内,分享一张图片到微信等平台。图片中包含用户的姓名头像和带着自己信息的二维码。然后,如何生成这张海报呢首先我们老大告诉我有一个插件叫其作用就是可以将节点转化成图片,是个不错的东西。 啦啦啦,首先说下需求,产品想让用户在我们app内,分享一张图片到微信、qq等平台。图片中包含用户的姓名、头像、和带着自己信息的二维码。然后,如何生成这张海报呢~~~首...
摘要:啦啦啦,首先说下需求,产品想让用户在我们内,分享一张图片到微信等平台。图片中包含用户的姓名头像和带着自己信息的二维码。然后,如何生成这张海报呢首先我们老大告诉我有一个插件叫其作用就是可以将节点转化成图片,是个不错的东西。 啦啦啦,首先说下需求,产品想让用户在我们app内,分享一张图片到微信、qq等平台。图片中包含用户的姓名、头像、和带着自己信息的二维码。然后,如何生成这张海报呢~~~首...
摘要:海报生成示例最近智酷君在做小程序生成海报的项目中遇到一些棘手的问题,在网上查阅了各种资料,也踩扁了各种坑,智酷君希望把这些填坑经验整理一下分享出来,避免后来的兄弟重复掉坑。 showImg(https://segmentfault.com/img/bVbs5V8?w=343&h=517);海报生成示例 最近智酷君在做[小程序]canvas生成海报的项目中遇到一些棘手的问题,在网上查阅了...
阅读 1400·2023-04-25 16:31
阅读 1998·2021-11-24 10:33
阅读 2706·2021-09-23 11:33
阅读 2491·2021-09-23 11:31
阅读 2857·2021-09-08 09:45
阅读 2281·2021-09-06 15:02
阅读 2610·2019-08-30 14:21
阅读 2284·2019-08-30 12:56