常用业务js组件：canvas绘图、时间戳转换、正则验证、深拷贝等

新@mosowe2/j(t)s文档地址

mosowejs不再推荐，推荐使用@mosowe2/js

注意：@mosowe2/js@2.0.1版本开始，前缀统一添加m_，新增@mosowe2/ts包
注意：@mosowe2/js@2.0.1版本开始，前缀统一添加m_，新增@mosowe2/ts包
注意：@mosowe2/js@2.0.1版本开始，前缀统一添加m_，新增@mosowe2/ts包

先推荐一个npm包【mosowejs】，对没错，用我的专用名称命名的js，点击可以查看示例，手机，PC均可，内部包含了N多日常开发用到的：

1. 正则验证（手机号，座机号，中英文，数字，url等等），
2. 常用的一些方法（时间格式化-年月日时分秒季度周数天数，数字千分位，数据脱敏，数据千分位，复制等等等），
3. 一些数据类型判断（移动端PC判断、object，number，string…）
4. 常用canvas绘图（海报图，裁剪类的有涂抹裁剪，多边形裁剪）基于document开发，同类的跨端插件uniapp点此

二维码

方法：CreateQrCode(text,options)

返回二维码图片

属性	类型	必填	默认	说明
text	string	是	-	要转为二维码的数据
options	optionsProps	否	{}	二维码相关配置

optionsProps

属性	类型	必填	默认	说明
typeNumber	number	否	4
errorCorrectLevel	‘L’ | ‘M’ | ‘Q’ | ‘H’	否	‘M’
size	number	否	500	如果数据太长生成不了二维码，可以把此处的数值改大

缓存

sessions

方法	说明
sessions.get(key:string)	sessionStorage获取缓存，内部已JSON.parse()，无需再转
sessions.set(key:string,value:any)	sessionStorage设置缓存，内部处理JSON.stringify()，无需再转
sessions.remove(key:string)	sessionStorage删除缓存
sessions.clear()	sessionStorage清空缓存

local

方法	说明
local.get(key:string)	localStorage获取缓存，内部已JSON.parse()，无需再转
local.set(key:string,value:any)	localStorage设置缓存，内部处理JSON.stringify()，无需再转
local.remove(key:string)	localStorage删除缓存
local.clear()	localStorage清空缓存

函数

时间格式化

方法：DateFormat(timeTemp,fmt)

返回格式化后的时间

属性	类型	必填	默认	说明
timeTemp	number	是	-	时间戳，毫秒级
fmt	string	否	YYYY-MM-DD hh:mm:ss	要转换的格式

数字千分位

方法：NumberDot(value,float)

返回格式化后的数字

属性	类型	必填	默认	说明
value	number	是	-	要转的数字
float	boolean	否	false	小数位是否要转

数据脱敏

方法：ReplaceStar(value,start,end)

返回脱敏后的数据

如果value.length < start+end，或者value不为字符串类型，则原值返回，控制台报错，但不影响进程

属性	类型	必填	默认	说明
timeTemp	string	是	-	要脱敏的数据
start	number	否	3	数据前不脱敏位数
end	number	否	4	数据后不脱敏位数

判断是否带有小数位

方法：NumberIsFloat(number,maxLen)

返回boolean

属性	类型	必填	默认	说明
number	number	是	-	要判断的数字
maxLen	number	否	-	判断小数位个数，即最多保留小数位

数字转万且千分位

方法：NumberWan(value,float)

返回格式化后的数字

属性	类型	必填	默认	说明
value	number	是	-	要换的数字
float	number	否	2	保留的小数位数

离屏文件选择

方法：OutScreenFileChoose(options)

返回promise，值为选择的文件

options

属性	类型	必填	默认	说明
fileName	string	否	file	接口上传需要的文件字段名
accept	string	否	image/*	上传文件类型
multiple	boolean	否	false	是否多选
formData	boolean	否	false	选择后返回的数据是否需要formData

复制

方法：Copy(value)

属性	类型	必填	默认	说明
value	any	是	-	要复制的内容

深拷贝

方法：DeepClone(value)

返回拷贝后的数据

属性	类型	必填	默认	说明
value	any	是	-	要深拷贝的值

file转base64

方法：FileToBase64(file)

返回promise， 值为base64数据

属性	类型	必填	默认	说明
file	file	是	-	要转的文件

base64转blob（file文件）

方法：Base64toBlob(base64)

返回promise，值为blob数据

属性	类型	必填	默认	说明
base64	base64	是	-	要转的base64数据

删除对象中的空

方法：DeleteEmptyObj(obj)

返回处理后的数据

属性	类型	必填	默认	说明
obj	object	是	-	要处理的json数据

资源文件下载到本地

方法：FileDownload(link,name)

处理后直接调起浏览器的下载

这是一个汇总的下载方式，主要是处理一些图片下载，文档类型下载

你也可以使用XMLHttpRequest单独下载文档类型文件

或者使用XMLHttpRequest + WebImageToBase64下载图片类型文件

但是我建议使用 FileDownload 这个总入口下载图片、文档类型文件

属性	类型	必填	默认	说明
link	string	是	-	文件地址
name	string	否	-	文件下载后的名称，默认是文件地址的最后一截名称

下载文件

方法：XMLHttpRequest(link,name,type)

属性	类型	必填	默认	说明
link	string	是	-	文件下载地址，图片为base64
name	string	是	-	文件保存的名称
type	string	是	-	文件类型，图片：image，非图片：file

网络图片转为本地base64或blob

方法：WebImageToBase64(imgUrl)

返回promise，值为base64或blob

属性	类型	必填	默认	说明
imgUrl	string	是	-	网络图片地址

防抖

方法：Debounce(callback,time)

只执行最后一次事件

属性	类型	必填	默认	说明
callback	function	是	-	回调函数
time	number	否	300	间隔时间，毫秒

节流

方法：Throttle(callback,time)

一段时间内只执行一次事件

属性	类型	必填	默认	说明
callback	function	是	-	回调函数
time	number	否	300	间隔时间，毫秒

canvas

canvas图片合成

方法：CanvasImageCompose(config)

返回promise，值为图像base64，或者空

config

属性	类型	必填	默认	说明
list	canvasImageComposeListItem	是	-	要渲染的数据列表
imgType	‘jpeg’ | ‘png’	否	jpeg	输出图像格式
height	number	否	1330	canvas高度
width	number	否	750	canvas宽度

canvasImageComposeListItem

属性	类型	必填	默认	说明
type	string	是	-	元素类型：image图片，text文本，rect矩形（线条），arc圆形，qr二维码
x	number	是	-	X轴坐标
y	number	是	-	Y轴坐标
content	string	是	-	image：图片数据，text：文字，rect及arc：不使用此字段
width	number	否	-	图片、矩形（线条）、圆形宽度
height	number	否	-	图片、矩形（线条）高度
arc	boolean	否	false	type=image时：是否绘制圆形图片
arcType	‘cover’ | ‘scale’ | ‘clip’	否	cover	裁剪圆形图片模式，默认cover平铺，scale缩放，clip裁剪
arcClipXYS	number	否	-	arcType=clip时裁剪坐标及缩放等级，1为不缩放，例[20,30,1]
color	string	否	#000000	绘制文本、矩形（线条）的颜色，默认：#000000
font	number	否	-	绘制文本的字号大小，字体样式，格式示例’20px sans-serif’
align	‘left’ | ‘right’ | ‘center’	否	left	绘制文本的对齐方式，默认：left
maxWidth	number	否	-	绘制文本的最大宽度，文字长度超过该值会被压缩
globalAlpha	number	否	1	透明度：0~1，默认1

canvas涂抹裁剪

方法：CanvasDaubClip(config)

返回promise，值为图像base64，或者空，或handleClip为true的时候，返回object，需调用object.clip()方法手动裁剪，clip()返回promise，裁剪之后的图片大小与触摸区域大小一致，预览可能会放大裁剪的图片，移动端绘制速度慢了可能会出现首尾链接现象

config

属性	类型	必填	默认	说明
image	string	是	-	图片路径
el	string	否	-	挂载的元素id名称，没有则默认全屏
width	number	否	300	裁剪区宽度
height	number	否	300	裁剪区高度
radius	number	否	20	涂抹半径
alpha	number	否	0.6	蒙层透明度
handleClip	boolean	否	false	是否手动裁剪，false则松手就裁剪，调用clip()方法触发手动裁剪，参考后面示例
shade	string	否	#000000	遮罩层的颜色（#号开头的）或者图片（base64或有效路径）

canvas多边形裁剪

方法：CanvasPolygonClip(config)

返回promise，值为object，执行object.clip()方法手动裁剪，该方法返回promise，值为base64或者空

config

属性	类型	必填	默认	说明
image	string	是	-	图片路径
el	string	否	-	挂载元素，没有则默认全屏，因该方法需要手动裁剪，所以建议配置该属性，通过clip()裁剪，请看示例
side	number	否	3	边数，不能小于3，边数越多可越接近圆
radius	number	否	150	半径，点到中心距离
rect	boolean	否	false	是否为正矩形，为true时，side失效
rectWidth	number	否	=radius	正矩形的宽，没有或为0，默认取radius
rectHeight	number	否	=radius	正矩形的长，没有或为0，默认取radius
alpha	number	否	0.6	裁剪蒙层透明度，默认0.6
inner	boolean	否	false	是否为内多边形，默认false
innerTimes	number	否	0.5	内多边形时，靠内的点半径为radius*innerTimes， 默认0.5
width	number	否		宽度，仅pc端有效，pc默认50vw，移动端固定全屏
height	number	否		高度，仅pc端有效，pc默认100vh，移动端固定全屏
rotate	boolean	否	true	是否可旋转，默认true

示例：

// 触摸裁剪及多边形裁剪可参考此示例
let handleSideClip:any = null

// 选择文件并打开裁剪
const beginClip = () => {
  OutScreenFileChoose()
  .then(async (res:any) => {
    handleSideClip = await CanvasPolygonClip({
       image: res[0],
       el:'showClip'
    })
  })
}
  

// 手动触发裁剪
  const DaubClip = async ()=> {
    if (handleSideClip) {
      // data为裁剪的图片
      const data = await handleSideClip.clip()
    }
    handleSideClip = null
  }

正则

手机号

正则内容：Mobile = /^1[3456789]\d{9}$/

校验方法：IsMobile(value:string)

座机

正则内容：StudioCamera = /^0\d{2,3}-\d{6,8}$/

校验方法：IsStudioCamera(value:string)

邮箱

正则内容：Email = /^\w+(\.)?(\w+)?@[0-9a-z]+(\.[a-z]+){1,3}$/

校验方法：IsEmail(value:string)

身份证

正则内容：IdCard = /^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/

校验方法：IsIdCard(value:string)

数字

正则内容：Digit = /^\d+$/

校验方法：IsDigit(value:string|number)

数字字母

正则内容：DigitLetter = /^[A-Za-z0-9]+$/

校验方法：IsDigitLetter(value:string|number)

中文

正则内容：Chinese = /^[\u4e00-\u9fa5]+$/

校验方法：IsChinese(value:string)

中文，英文，数字，下滑线

正则内容：CnEnNuLine = /^[\u4e00-\u9fa5A-Za-z0-9_]+$/

校验方法：IsCnEnNuLine(value:string)

英文

正则内容：English = /^[A-Za-z]+$/

校验方法：IsEnglish(value:string)

大写英文

正则内容：CapitalEnglish = /^[A-Z]+$/

校验方法：IsCapitalEnglish(value:string)

ipv4

正则内容：Ipv4 = /^(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)(\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/

校验方法：IsIpv4(value:string)

http,https地址

正则内容：Url = /^(?:http(s)?:\/\/)?[\w.-]+(?:\.[\w\.-]+)+[\w\-\._~:/?#[\]@!\$&'\(\)\*\+,;=]+$/

校验方法：IsUrl(value:string)

邮编

正则内容：PostCode = /^[0-8]\d{5}$/

校验方法：IsPostCode(value:string)

社会信用代码编码规则

正则内容：SocialCreditCode = /[0-9A-HJ-NPQRTUWXY]{2}\d{6}[0-9A-HJ-NPQRTUWXY]{10}/

校验方法：IsSocialCreditCode(value:string)

判断

除判断手机设备及false/true，其他基于Object.prototype.toString.call()方法判断

是否是手机设备

方法：IsPhone()

是否是object

方法：IsObject(value:any)

是否是数组

方法：IsArray(value:any)

是否是数字

方法：IsNumber(value:any)

是否是字符串

方法：IsString(value:any)

是否是时间

方法：IsDate(value:any)

是否是Boolean类型

方法：IsBoolean(value:any)

是否是函数

方法：IsFunction(value:any)

是否为null

方法：IsNull(value:any)

是否为undefind

方法：IsUndefined(value:any)

是否为false

方法：IsFalse(value:any)

是否为true

方法：IsTrue(value:any)

安装

npm install mosowejs

使用

全引入：

import mosowe from 'mosowejs'
mosowe.Copy(123)

按需引入：

import {Copy} from 'mosowejs'
Copy(123)

git码云地址：

https://gitee.com/mosowe/mosowejs

业余之时，摸鱼之内，细想近些年做项目，总是或多或少的用到很多的js方法，总是没有一个综合性的来包裹自己开发的插件啥的，所以最近打算把他们全都合并一下，也许有漏掉的。

如果你有其他建议或需求，欢迎留言评论。