JavaScript
文章平均质量分 50
正则匹配的积累
web修理工
这个作者很懒,什么都没留下…
展开
-
fetch请求获取blob和arraybuffer文件流及核心API使用总结 -新
原文链接:https://blog.csdn.net/WU5229485/article/details/85219165在项目中使用fetch操作文件流,因为没有用到axios,而且fetch的使用方式和axios还有一定的区别,所以写一篇博文,具体细致的描述下fetch的基本使用。一、Fetch在项目中的基本使用Fetch API提供了一个 JavaScript 接口用于访问和操作HTTP管道的零件,如请求和响应。它还提供了一种全局fetch()方法,可以提供一种简单,合理的方式在网络上异步获取资原创 2022-09-08 15:31:04 · 5929 阅读 · 0 评论 -
tree树形数据处理 扁平化树状 树状扁平化 处理树里的数据
tree树形数据处理扁平化树状树状扁平化处理树里的数据。原创 2022-07-21 19:23:12 · 485 阅读 · 0 评论 -
DOMContentLoaded DOMNodeInserted DOMNodeRemoved 加载 添加 删除 dom
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>D.原创 2022-05-16 14:45:44 · 387 阅读 · 6 评论 -
分享微博 空间 内容
分享微博:http://www.bshare.cn/help/installEmail原创 2022-01-06 16:19:42 · 194 阅读 · 0 评论 -
正则匹配 基础
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>D.原创 2021-12-06 11:58:31 · 100 阅读 · 0 评论 -
无感录屏技术
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <tit.原创 2021-11-28 21:59:47 · 438 阅读 · 1 评论 -
Exif.js 图片信息
使用Exif.js读取照片方向 EXIF.getData(file, function () { EXIF.getAllTags(this) Orientation = EXIF.getTag(this, 'Orientation') })使用Exif.js读取照片的GPS信息和拍摄时间getImgLocation(img) { return new Promise(resolve => { EXIF.getData原创 2021-11-17 15:22:38 · 1261 阅读 · 0 评论 -
mediaDevices-getUserMedia-getDisplayMedia
转载:https://developer.mozilla.org/en-US/docs/Web/API/MediaDevicesenumerateDevices()获取有关系统上可用的媒体输入和输出设备的一系列信息。getSupportedConstraints()返回符合MediaTrackSupportedConstraints指示MediaStreamTrack接口支持哪些可约束属性的对象。见能力和限制在媒体捕获和流API(流媒体),以了解更多关于限制和如何使用它们。getDisplayMe原创 2021-11-16 16:58:50 · 3443 阅读 · 0 评论 -
Electron中Refused to execute inline script because it violates the following Content Security Policy
方法一: 去掉Content Security Policy<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self'"> <meta http-equiv="X-Content-Secur转载 2021-11-15 15:44:18 · 1601 阅读 · 0 评论 -
mediaDevices-new MediaSource() 流媒体处理
new MediaSource()<!DOCTYPE html><html> <head> <meta charset="utf-8"/> </head> <body> <video controls></video> <script> var video = document.querySelector('video'); var原创 2021-11-15 14:46:26 · 1475 阅读 · 0 评论 -
svg 简单了解
参考链接:http://cw.hubwiz.com/card/c/5636b7041bc20c980538e995/1/4/5/参考链接:https://www.jianshu.com/p/8ddb4ba85594<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=原创 2021-11-10 09:35:55 · 475 阅读 · 0 评论 -
canvas 处理视频 录制-新
参考:https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Manipulating_video_using_canvasindex.jsvar processor = {};processor.doLoad = function doLoad() { this.video = document.getElementById("video"); this.c1 = document.getElementById("c1");转载 2021-11-09 16:46:28 · 1091 阅读 · 0 评论 -
canvas 生成水印图片 加水印 剪切复制
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>D.原创 2021-11-09 14:08:22 · 1145 阅读 · 0 评论 -
javaScript 使用canvas转图 图转canvas
使用JavaScript将图片拷贝进画布function convertImageToCanvas(image) { var canvas = document.createElement("canvas"); canvas.width = image.width; canvas.height = image.height; canvas.getContext("2d").drawImage(image, 0, 0); return canvas;}用JavaScript将画布保持成图片原创 2021-03-21 19:49:46 · 577 阅读 · 0 评论 -
严格模式注意点 “use strict“;
严格模式的作用域<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>11-严格模式的作用域</title> <style> * { margin: 0; padding: 0; } </style></h原创 2021-11-05 17:23:15 · 326 阅读 · 0 评论 -
with简单说明
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>16-with简单说明</title> <style> * { margin: 0; padding: 0; } </style></head>&.原创 2021-11-05 17:14:53 · 86 阅读 · 0 评论 -
npm 文件检测/执行多个命令 忽略报错js
1.eslint检测错误npm run eslint2.eslint 修改格式npm run eslint-fix3.npm 执行多个命令具体操作1、需要安装 concurrently 模块2、npm install concurrently -D案例一"scripts": { "test": "echo \"Error: no test specified\" && exit 1", "clientServer": "live-server --ope原创 2021-11-03 11:47:02 · 2099 阅读 · 0 评论 -
crypto 密码加密
'use strict';var crypto = require('crypto');/** * generates random string of characters i.e salt * @function * @param {number} length - Length of the random string. */var genRandomString = function(length){ return crypto.randomBytes(Math.ceil(le原创 2021-11-03 11:22:47 · 1855 阅读 · 0 评论 -
canvas 图片处理
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <titl.原创 2021-10-28 18:30:46 · 106 阅读 · 0 评论 -
canvas 移动尾巴处理
参考:https://developer.mozilla.org/zh-CN/docs/Web/API/Canvas_API/Tutorial/Basic_animations太阳系动画var sun = new Image();var moon = new Image();var earth = new Image();function init(){ sun.src = 'https://mdn.mozillademos.org/files/1456/Canvas_sun.png';转载 2021-10-28 16:57:33 · 292 阅读 · 0 评论 -
JS生成uuid的四种方法
uuid 是数据的唯一标识,可以放在请求Cookie 加设备类型做,用户分析!第一种function guid() { return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) { var r = Math.random() * 16 | 0, v = c == 'x' ? r : (r & 0x3 | 0x8); return v.toS转载 2021-10-18 11:55:59 · 15592 阅读 · 1 评论 -
手机调试log 问题
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>D.原创 2021-10-15 18:41:20 · 108 阅读 · 0 评论 -
js 小球缓动动画
参考:https://www.jianshu.com/p/003415b07a1a<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width,原创 2021-10-15 17:03:48 · 627 阅读 · 0 评论 -
备忘模式(函数结构缓存)
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>16-备忘模式(函数结构缓存)</title> <style> * { margin: 0; padding: 0; } </style></head&g.原创 2021-10-13 14:29:22 · 50 阅读 · 0 评论 -
观察者模式 简介
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>D.原创 2021-10-13 14:26:42 · 69 阅读 · 0 评论 -
单例模式的实现方式
单例模式实现<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <tit原创 2021-10-12 15:01:43 · 84 阅读 · 0 评论 -
闭包的简单应用
页面打开 使用闭包可以短暂存储在内存中<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>13-函数作为返回值(计数器)</title> <style> * { margin: 0; padding: 0; } </s原创 2021-10-09 17:01:30 · 89 阅读 · 0 评论 -
node 生成网络图片 下载图片
生成图片<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <原创 2021-09-29 21:50:45 · 909 阅读 · 0 评论 -
canvas 操作者像素点
// 加载龙的图片let img = new Image()img.src = './龙.jpg'img.onload = () => { draw()}// 把图片绘制到canvas里const draw = () => { const canvas = document.getElementById('canvas') canvas.width = img.width canvas.height = img.height const ctx原创 2021-09-29 06:51:16 · 336 阅读 · 0 评论 -
常见的操作运算符
转载:https://juejin.cn/post/6918902650964557838#heading-0这些 JS 中强大的操作符,总有几个你没听说过JS 里的操作符大家每天都在使用,还有一些 ES2020、ES2021 新加的实用操作符,这些共同构成了 JS 灵活的语法生态。本文除介绍常用的操作符之外,还会介绍 JS 里一些不常用但是很强大的操作符,下面我们一起来看看吧~数值分割符 _ES2021 引入了数值分割符 _,在数值组之间提供分隔,使一个长数值读起来更容易。Chrome 已经提供转载 2021-09-29 06:14:45 · 299 阅读 · 0 评论 -
文本展示隐藏
隐藏形式一 color: #000; background-color: #f00; text-indent: 5em; } /* //4就是需要在收起的时候显示的行数 */ .packup:after { display: -webkit-box; -webkit-box-orient: vertical; -webkit-bo原创 2021-09-26 14:22:22 · 224 阅读 · 0 评论 -
JSON文件压缩处理 工具
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>D.原创 2021-09-24 14:05:44 · 643 阅读 · 0 评论 -
当前刷新 后面刷新
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>D.原创 2021-09-18 10:34:43 · 92 阅读 · 0 评论 -
文件下载 上传 编辑 预览 web端
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>D.原创 2021-09-10 17:28:36 · 129 阅读 · 0 评论 -
iframe 的基本用法
1.iframe src 可以展示 index.html 网页2.iframe src 可以展示 文件链接3…iframe src 可以展示 base64 链接 const input = document.querySelector("#upload"); input.addEventListener('change', function () { const files = this.files; console.log(fil原创 2021-09-10 16:19:04 · 5317 阅读 · 0 评论 -
base64的转码设置 charset=utf-8;
Data URI,不是URLURL是uniform resource locator的缩写,在web中的每一个可访问资源都有一个URL地址,例如图片,HTML文件,js文件以及style sheet文件,我们可以通过这个地址去download这个资源。其实URL是URI的子集,URI是uniform resource identifier的缩写。URI是用于获取资源,包括其附加的信息的一种协议。附加信息可能是地址,也可能不是地址,如果是地址,那么这时URI就变成URL了。注意的是data URI不是转载 2021-09-10 16:05:13 · 58338 阅读 · 6 评论 -
文件下载 方式 web
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>D.原创 2021-09-10 10:04:36 · 52 阅读 · 0 评论 -
基本数据类型判断
基本数据类型Number 类型的判断1.num 数据 可以分为 数字+0+NaN 其中0 和NaN判断比较令人头疼判断是不是 Number 类型val.constructor===numberObject.prototype.toString.call(val)=="[object Number]"1判断是不是合法的Numberif(typeof val==='number'&&String(val)!='NaN'){ }2.防止在老版本的浏览器不支持isNaN原创 2021-08-31 15:24:20 · 677 阅读 · 0 评论 -
随机数方式
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>D.原创 2021-08-13 18:15:36 · 90 阅读 · 0 评论 -
Object 相关属性方
参考:https://www.cnblogs.com/z-dl/p/8204023.html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-w原创 2021-08-10 14:45:01 · 123 阅读 · 0 评论