h5webtools v1.1.1

h5webtools

常用函数工具、浏览器唤起摄像头拍照或录像、div 保存为 pdf、拖拽到指定盒子容器

地址：gitee

当前版本：v1.1.1

更新时间：2023-06-27 17:15:00

安装

npm install h5webtools --save

使用

全部引入

import * as $xy from 'h5webtools';
import 'h5webtools/dist/css/openCamera.css';

按需引入

工具库

import { XyTools } from 'h5webtools';

var $xy = new XyTools();

1. 日期格式化

$xy.FD(new Date()); // 2023-06-27 14:57:02

2. 日期转换为大写

$xy.CS(new Date()); // 二〇二三年六月二十七日

3. 缓存存取

$xy.set('xy', 2333333);

$xy.get('xy');

$xy.remove('xy');

4. base64转文件

$xy.UDF('base64', 'xy');

5. search参数解析

浏览器地址栏：http://www.xy.com?id=2333&name=xy

$xy.SR(); // { id: 23333, name: 'xy' }

6. 美化的console

$xy.log('~title', 233333);

$xy.warn('~title', '2333', '哈哈哈', '乌苏');

$xy.error('银鞍照白马', '飒沓如流星');

首个参数使用 ~ 开头会被解析为标题。

7. 随机数

$xy.RI(); // 2KRDqMLy

$xy.RI(16); // 2rUlM28m514CkCl9

8. 图片压缩

$xy.ZI(file, 1024 * 100, 0.5); // 文件 100K 以下 压缩质量 0.5

9. 格式化金额

$xy.FM(100); // ￥100.00

10. 文件上传

$xy.UF('http://', formData);

11. 深度克隆

$xy.DC(obj);

12. XMLHttpRequest

// get 请求
$xy.xyRequest({
  url: 'http://www.baidu.com/s?username=233'
}).then(res => {}).catch(err => {});

// 全部参数
$xy.xyRequest({
  url: 'http://',
	method: 'post',
	data: { username: 'xy' },
	header: {
    'Content-Type', 'application/xxx;'
  },
	token: 'djo3kl21jl31'
}).then(res => {}).catch(err => {});

13. 公历、农历互转

$xy.GC(new Date);
/** 
	{
		Animal: "兔",
		IDayCn: "初十",
		IMonthCn: "五月",
		...
	}
*/

14. 防抖

$xy.DB(fn, 200);

15. 节流

$xy.TT(fn, 200);

16. 清除默认事件

$xy.PE(e);

17. 判断空格

$xy.IS(' 2333'); // true

web相机

浏览器唤起摄像头 <拍照> 或 <摄像>功能

需要在 | 环境下，录像只支持 与

1. 使用的 Api 介绍

mediaDevices Api

mediaDevices 是 Navigator 只读属性，返回一个 MediaDevices 对象，该对象可提供对相机和麦克风等媒体输入设备的连接访问，也包括屏幕共享。

if (navigator.mediaDevices.getUserMedia) {
    /* 最新标准API */
    navigator.mediaDevices.getUserMedia(constraints).then(success).catch(error);
} else if (navigator.webkitGetUserMedia) {
    /* webkit核心浏览器 */
    navigator.webkitGetUserMedia(constraints, success, error);
} else if (navigator.mozGetUserMedia) {
    /* firefox浏览器 */
    navigator.mozGetUserMedia(constraints, success, error);
} else if (navigator.getUserMedia) {
    /* 旧版API */
    navigator.getUserMedia(constraints, success, error);
}

兼容性：https://developer.mozilla.org/zh-CN/docs/Web/API/Navigator/mediaDevices

MediaRecorder Api

MediaRecorder 是 MediaStream Recording API 提供的用来进行媒体轻松录制的接口，他需要通过调用 MediaRecorder() 构造方法进行实例化。

兼容性：https://developer.mozilla.org/zh-CN/docs/Web/API/MediaRecorder

2. 引入

import { WebCamera } from 'h5webtools';

import 'h5webtools/dist/css/openCamera.css';

3. 创建相机实例

var camera = new WebCamera({
		type: 'image',
		isFile: true,
		mode: 'user',
		audio: false,
		success: (res) => {
			$xy.log('~相机返回', res);
		}
});

4. 打开相机

camera.openCamera();

拖拽功能

import { dragTo } from 'h5webtools';

var drag = new dragTo({
		originElemID: 'origin',
		targetElemID: 'target',
		duration: '',
		success: (res) => {},
		fail: (err) => {}
});

支持 web 与 移动端

转 PDF

import { downloadPDF } from 'h5webtools';

downloadPDF(element, pdfName); // File