代码拉取完成,页面将自动刷新
常用函数工具、浏览器唤起摄像头拍照或录像、div 保存为 pdf、拖拽到指定盒子容器
当前版本: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();
$xy.FD(new Date()); // 2023-06-27 14:57:02
参数 | 说明 | 默认值 | 是否必填 |
---|---|---|---|
date | 传入的日期时间 | 🈚️ | ✅ |
format | 0:日期 + 时间 1:日期 2:时间 | 0 | ❌ |
symbol_date | 分割日期的符号 | - | ❌ |
symbol_time | 分割时间的符号 | : | ❌ |
type | 12小时或24小时制时间 | 24 | ❌ |
$xy.CS(new Date()); // 二〇二三年六月二十七日
参数 | 说明 | 默认值 | 是否必填 |
---|---|---|---|
date | 传入的日期时间 | 🈚️ | ✅ |
$xy.set('xy', 2333333);
$xy.get('xy');
$xy.remove('xy');
参数 | 说明 | 默认值 | 是否必填 |
---|---|---|---|
key | 键 | 🈚️ | ✅ |
data | set 时传入 | 🈚️ | ✅ |
mode | localStorage: 1 sessionStorage: 0 | 1 | ❌ |
$xy.UDF('base64', 'xy');
参数 | 说明 | 默认值 | 是否必填 |
---|---|---|---|
dataurl | base64 | 🈚️ | ✅ |
filename | 文件名称 | 0 | ✅ |
type | 类型: file 或者 blob | file | ❌ |
浏览器地址栏:http://www.xy.com?id=2333&name=xy
$xy.SR(); // { id: 23333, name: 'xy' }
$xy.log('~title', 233333);
$xy.warn('~title', '2333', '哈哈哈', '乌苏');
$xy.error('银鞍照白马', '飒沓如流星');
首个参数使用 ~ 开头会被解析为标题。
$xy.RI(); // 2KRDqMLy
$xy.RI(16); // 2rUlM28m514CkCl9
参数 | 说明 | 默认值 | 是否必填 |
---|---|---|---|
length | 随机数长度,最多32位 | 🈚️ | ❌ |
$xy.ZI(file, 1024 * 100, 0.5); // 文件 100K 以下 压缩质量 0.5
参数 | 说明 | 默认值 | 是否必填 |
---|---|---|---|
file | 文件对象 File | 🈚️ | ✅ |
maxSize | 允许传入文件的最大值 bite | 🈚️ | ✅ |
quality | 压缩质量 0 - 0.92 | 🈚️ | ✅ |
$xy.FM(100); // ¥100.00
参数 | 说明 | 默认值 | 是否必填 |
---|---|---|---|
money | 金额 | 🈚️ | ✅ |
symbol | 符号 | ¥ | ❌ |
$xy.UF('http://', formData);
参数 | 说明 | 默认值 | 是否必填 |
---|---|---|---|
url | 地址 | 🈚️ | ✅ |
formData | FormData | 🈚️ | ✅ |
$xy.DC(obj);
// 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 => {});
参数 | 说明 | 默认值 | 是否必填 |
---|---|---|---|
url | 地址 | 🈚️ | ✅ |
method | 方法 | 🈚️ | ❌ |
data | 数据值 post 才传 get放在url | 🈚️ | ❌ |
header | 请求头 | application/json | ❌ |
token | 令牌 | 🈚️ | ❌ |
$xy.GC(new Date);
/**
{
Animal: "兔",
IDayCn: "初十",
IMonthCn: "五月",
...
}
*/
参数 | 说明 | 默认值 | 是否必填 |
---|---|---|---|
date | 日期参数 | 🈚️ | ✅ |
$xy.DB(fn, 200);
参数 | 说明 | 默认值 | 是否必填 |
---|---|---|---|
fn | 防抖方法 | 🈚️ | ✅ |
Delay | 延时 | 🈚️ | ✅ |
$xy.TT(fn, 200);
参数 | 说明 | 默认值 | 是否必填 |
---|---|---|---|
fn | 节流方法 | 🈚️ | ✅ |
Delay | 延时 | 🈚️ | ✅ |
$xy.PE(e);
$xy.IS(' 2333'); // true
参数 | 说明 | 默认值 | 是否必填 |
---|---|---|---|
str | 传入的判定值 | 🈚️ | ✅ |
浏览器唤起摄像头 <拍照> 或 <摄像>功能
需要在 | 环境下,录像只支持 与
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
import { WebCamera } from 'h5webtools';
import 'h5webtools/dist/css/openCamera.css';
var camera = new WebCamera({
type: 'image',
isFile: true,
mode: 'user',
audio: false,
success: (res) => {
$xy.log('~相机返回', res);
}
});
参数 | 说明 | 默认值 | 是否必填 |
---|---|---|---|
type | Image 或 video 拍照或录像 | image | ❌ |
isFile | 是否返回文件 File (false 返回 base64) | true | ❌ |
mode | 摄像头模式 前置(user)或者后置(environment) | user | ❌ |
audio | 录像是否录制音频 | true | ❌ |
success | 点击保存成功回调 | 🈚️ | ✅ |
camera.openCamera();
import { dragTo } from 'h5webtools';
var drag = new dragTo({
originElemID: 'origin',
targetElemID: 'target',
duration: '',
success: (res) => {},
fail: (err) => {}
});
支持 web 与 移动端
参数 | 说明 | 默认值 | 是否必填 |
---|---|---|---|
originElemID | 拖拽元素的 id | 🈚️ | ✅ |
targetElemID | 拖拽到目标元素的 id | 🈚️ | ✅ |
duration | 长按元素多久开始执行拖拽 (ms) | null | ❌ |
success | 拖拽成功的回调函数 | 🈚️ | ✅ |
fail | 拖拽失败的回调函数 | 🈚️ | ✅ |
import { downloadPDF } from 'h5webtools';
downloadPDF(element, pdfName); // File
参数 | 说明 | 默认值 | 是否必填 |
---|---|---|---|
element | 转换的元素 Element | 🈚️ | ✅ |
pdfName | pdfName 名称 | 0 | ❌ |
此处可能存在不合适展示的内容,页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容,可点击提交进行申诉,我们将尽快为您处理。