优化需求，内容是生成电子签名，发现好多个项目都重复写，于是打算自己造个小轮子，名字就叫vue-asign，说明文档如下：

vue-asign

Canvas 生成电子签名

支持vue2、vue3

演示demo

功能

适配 PC 和 Mobile；
自定义画布尺寸（导出图尺寸），画笔粗细、颜色，画布背景色；
默认裁剪内容区域，可自定义周围边距或者设置不裁剪。
导出图片格式为 base64；

安装

npm install vue-asign --save

使用

全局使用、局部

// 全局 vue2 main.js
import asign from 'vue-asign'
Vue.use(asign)
// 全局vue3 main.js
import App from './App.vue'
import asign from 'vue-asign'
const app = createApp(App)
app.use(asign)
// 局部
import asign from 'vue-asign'
components: { asign }

说明

属性	类型	默认值	说明
width	Number	600	画布宽度，即导出图片的宽度
height	Number	300	画布高度，即导出图片的高度
lineWidth	4	Number	画笔粗细
lineColor	String	#000000	画笔颜色
gapLeft	Number	5	图片左边距
gapTop	Number	5	图片上边距
gapRight	Number	5	图片右边距
gapBottom	Number	5	图片下边距
direction	Number	0	图片旋转角度（顺时针旋转,只有90、180、270三个数值有效）
bgColor	String	空	画布背景色，为空时画布背景透明，支持多种格式 ‘#aaa’，‘#ababab’，‘rgb(255, 255, 255)’，‘rgba(255,255,255,0)’，‘green’
isCrop	Boolean	true	是否裁剪，在画布设定尺寸基础上裁掉四周空白部分
format	String	image/png	生成图片格式 image/jpeg(jpg格式下生成的图片透明背景会变黑色请慎用或指定背景色)、 image/webp
quality	Number	1	生成图片质量；在指定图片格式为 image/jpeg 或 image/webp的情况下，可以从 0 到 1 的区间内选择图片的质量。如果超出取值范围，将会使用默认值 0.92。其他参数会被忽略。

注：isCrop为true时，图片宽高由实际内容决定。

两个内置方法，通过给组件设置 ref 调用：

<vueAsign ref="asign" :width="500" :height="300" :lineWidth="1" :lineColor="'red'" :bgColor="'green'" />

清空画布

this.$refs.asign.clearCanvas()

生成图片

this.$refs.asign.createImg().then(res=>{this.resImg = res
})

源码地址：
gitee
github

使用vue造个小轮子vue-asign，canvas生成电子签名，满足需求相关推荐

小程序之保存canvas生成商品图片附加小程序二维码分享到朋友圈
小程序之保存canvas生成商品图片附加小程序二维码分享到朋友圈一.概述需要用到的生成二维码组件(可自行下载添加到小程序根目录utils里):https://github.com/demi52 ...
小程序uniapp利用canvas生成海报并可以保存至相册
✨uniapp实现生成海报并保存至相册组件,u-popup可以根据自己所使用的组件进行替换这里主要讲的是JS部分,css和元素相关的就不展开赘述了,下方先给大伙看看效果图,图的下方有代码讲解,最下方 ...
小程序中使用canvas 生成推广图片——wepy框架
现在小程序不能直接分享到朋友圈,所以另辟蹊径的有了生成 '推广图' 让用户分享到朋友圈的方式就出来了.使用canvas 进行绘图的时候主要用了 ctx.drawImage() API进行绘画,但是c ...
vue自定义日历小组件
vue自定义小日历组件一.前言自己开发的项目需要用到类似博客侧边栏小日历组件,觉得自己造一个比较随心所欲,更能满足自己的需求,所以决定自己开发一个.最终效果如图所示. 二.日历样式我的这个日历组 ...
uni-app 使用vue的语法+小程序的标签和API。
开发规范为了实现多端兼容,综合考虑编译速度.运行性能等因素,uni-app 约定了如下开发规范: 页面文件遵循 Vue 单文件组件 (SFC) 规范组件标签靠近小程序规范,详见uni-app 组件 ...
[vue] vue和微信小程序写法上有什么区别？
[vue] vue和微信小程序写法上有什么区别?写了vue项目和小程序,发现二者有许多相同之处,在此想总结一下二者的共同点和区别. 一.生命周期先贴两张图: vue生命周期小程序生命周期相比之下 ...
微信小程序和vue双向绑定哪里不一样_浅析Vue 和微信小程序的区别、比较
写了vue项目和小程序,发现二者有许多相同之处,在此想总结一下二者的共同点和区别. 一.生命周期先贴两张图: vue生命周期小程序生命周期相比之下,小程序的钩子函数要简单得多. vue的钩子函数 ...
vue和微信小程序的区别、比较
写了vue项目和小程序,发现二者有许多相同之处,在此想总结一下二者的共同点和区别. 一.生命周期先贴两张图: vue生命周期小程序生命周期相比之下,小程序的钩子函数要简单得多. vue的钩子函数 ...
实现一个基于Vue的Button小组件
概述原生HTML的button只能保证功能存在,样式都不怎么好看.当然也可以通过编写css样式来改变原生HTML中的button显示,但是现在各个UI框架都很流行,也很方便,很多时候都是直接引入框架 ...

使用vue造个小轮子vue-asign，canvas生成电子签名，满足需求

vue-asign

支持vue2、vue3

演示demo

功能

安装

使用

使用vue造个小轮子vue-asign，canvas生成电子签名，满足需求相关推荐

最新文章

热门文章