- 博客(50)
- 资源 (3)
- 收藏
- 关注
RSS订阅原创 gulp构建工具的基本使用
gulp是前端自动化打包构建工具，基于流格式的打包构建工具官网：https://www.gulpjs.com.cn/安装：node环境gulp:全局安装： npm install gulp -g局部安装：npm install gulp --save-dev准备工作1.gulpfile.js2.初始化 package.json (npm init)常用插件gulp-concat : 合并文件（js/css）gulp-uglify : 压缩js文件gu
2022-05-12 20:12:00
629
原创 chrome插件开发基础以及如何防止劫持
谷歌浏览器插件，可以大大的扩展你的浏览器的功能。包括但不仅限于这些功能：捕捉特定网页的内容，捕捉HTTP报文，捕捉用户浏览动作，改变浏览器地址栏/起始页/书签/Tab等界面元素的行为，与别的站点通信，修改网页内容……开发文档（360翻译的）：https://open.chrome.360.cn/extension_dev/overview.html开发流程比较简单：打开开发者模式，加载扩展程序创建manifest.json文件此处指写了一部分常用的，详细的请查看文档{ "manifes
2022-03-26 17:34:31
2151
原创 Typescript ---- 进阶篇
面向对象即程序之中的操作需要通过对象来完成，例如：操作浏览器要使用window对象操作网页要使用document对象操作控制台要使用console对象在程序中所有的对象都被分成了两个部分数据和功能，这里不多比比了1、类（class）要想面向对象，操作对象，首先便要拥有对象，那么下一个问题就是如何创建对象。要创建对象，必须要先定义类，所谓的类可以理解为对象的模型，程序中可以根据类创建指定类型的对象，举例来说：可以通过Person类来创建人的对象，通过Dog类创建狗的对象，通过Car类来创建汽
2022-02-21 19:38:57
750
原创 Typescript ---- 入门篇
Typescript简介TypeScript 是 JavaScript 的一个超集,对js进行了扩展，也新增了许多新的属性TS代码需要通过编译器编译为JS，然后再交由JS解析器执行相较于JS而言，TS拥有了静态类型，更加严格的语法，更强大的功能TS可以在代码执行前就完成代码的检查，减小了运行时异常的出现的几率；TS代码可以编译为任意版本的JS代码，可有效解决不同JS运行环境的兼容问题同样的功能，TS的代码量要大于JS，但由于TS的代码结构更加清晰，变量类型更加明确，在后期代码的维护中TS却远远胜
2022-02-14 20:02:35
408
原创 js小技巧和常见问题总结----2022-3-3更新
本篇文章是我平时工作中遇到的一些常见问题以及一些小技巧，可能比较简单，但是比较实用，记录一下，也是方便后续查找1.判断一个方法是否存在function funExists(funName){ try{ if(typeof eval(funName)=="undefined"){return false;} if(typeof eval(funName)=="function"){return true;} }catch(
2022-01-20 14:18:58
692
原创 js标签转为文本显示
假如：var str = '<img />广东第一猛男'<div class="weige"></div>需要将str插入到weige中，正常情况是这个字符串是不会显示的，但是需求是需要显示这个的方法：//标签转为文本显示 function htmlencode(str) { str = str.replace(/&/gi, '&'); str = str.replace(/</g, '<');
2021-11-22 19:50:05
1805
原创 storage跨页面监听事件
两个不同页面，操作其中一个页面，另外一个页面上需要实时发生改变如图：A和B是两个不同的页面，编辑A，点击添加，B页面内容也需要发生改变利用localstorage中的监听B页面打开A页面，操作A页面时，点击添加，存储一个值，监听的也是这个值：A页面：localStorage.setItem("addSpeechItem",new Date().getTime())B页面：function storageChange(key,fn,value){//key为要存储的名字，fn为触发stor
2021-11-12 17:57:11
1007
原创 flutter --url_launcher使用
url_launcher使用系统自带的浏览器打开网页dependencies: url_launcher: ^6.0.8方法：launchURL(url) async { if (await canLaunch(url)) { await launch(url); } else { throw 'Could not launch $url'; } }使用：launchURL("https://www.callmysoft.com/" )
2021-10-14 15:49:53
766
原创 flutter--webview_flutter的使用
webview_flutter在应用内置组件中加载网页dependencies: webview_flutter: ^2.0.9/// 初始化webview initWebView() { return WebView( //是否允许js执行 javascriptMode: JavascriptMode.unrestricted, //JS和Flutter通信的Channel javascriptChannels: <
2021-10-14 14:45:49
1694
原创 flutter 保存网络图片至本地
首先需要配置android\app\src\main\AndroidManifest.xml//开启读写权限 <uses-permission android:name="android.permission.INTERNET" /> <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" /> <uses-permission android:name="android
2021-09-10 16:53:25
2171
3
原创 flutter微信分享，qq分享
微信分享fluwx: ^3.5.0import 'package:fluwx/fluwx.dart' as fluwx;使用：初始化void initState() { super.initState(); _initFluwx(); }_initFluwx() async { await fluwx.registerWxApi( appId: '******************', doOnAndroid: true, d
2021-09-10 16:44:37
2386
原创 js版ffmpeg压缩视频以及去除背景音乐
ffmepg地址：https://unpkg.com/@ffmpeg/ffmpeg@0.9.5/dist/ffmpeg.min.js这个是网上编译好的，功能还挺多的，我自己不会编译，只能用别人的用法也挺简单的：<h3>视频前端压缩</h3><video id="output-video" controls></video><br/><input type="file" id="uploader"><p id="mess
2021-08-20 15:40:30
4697
13
原创 echarts旭日图数据重构处理
网上对于旭日图的数据结构处理资料很少，所以自己记录一下。首先看旭日图需要的数据结构：// 旭日图 { name: '淘宝', children: [ { name: '女装', children:[ { name:'上衣', value:22 }, { name:'裙子', value:12 },
2021-06-29 15:42:49
866
3
原创 在线表格编辑插件handsontable使用
记录：handsontable，在线表格编辑插件地址：https://github.com/handsontable/handsontable效果：使用：<link rel="stylesheet" href="/static/jsConversion/chartTool/css/jquery.handsontable.full.css"><script src="/static/jsConversion/chartTool/js/jquery.handsontable.ful
2021-06-24 18:15:26
881
原创 dom转图片
这段时间做了两个小功能，九宫格切图和九宫格拼图，这篇文章主要讲的就是我在九宫格拼图中遇到的问题：dom如何转成图片并下载。自己写？不可能的，这辈子都不可能自己写！一开始我用的是html2canvas,坑死人，不建议使用。推荐使用 domtoimage 地址：https://github.com/tsayen/dom-to-image使用：主要属性filter ： 过滤器节点中默写不需要的节点；bgcolor ： 图片背景颜色；height, width ： 图片宽高；style ：传入节
2021-06-02 11:49:40
3053
原创 简单的js图片加水印
简单的图片加水印原图：处理完的图片：直接贴代码，记录一下<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>加水印</title></head><b
2021-04-22 20:24:07
659
2
原创 puppeteer的使用，网页转长图和pdf
最近做网页转换成长图和pdf的功能，一开始准备canvas做转长图的功能，在当前网页操作是可行的，但是需求是需要可以截其他网站，想法是用iframe展示网站再进行截图，但是这是行不通的，一个跨域的问题就要搞死人，更何况就算截出来效果也是不是很好的，pdf功能还实现不了，最终是决定用puppeteerPuppeteer 是 Chrome 开发团队在 2017 年发布的一个 Node.js 包，用来模拟 Chrome 浏览器的运行Puppeteer 是 Node.js 工具引擎Puppeteer 提供了一
2021-03-19 16:20:20
1078
原创 js验证一张网络图片是否存在
记录：function checkImgExists(imgurl) { return new Promise(function(resolve, reject) { var ImgObj = new Image() ImgObj.src = imgurl ImgObj.onload = function(res) { resolve(res) } ImgObj.onerror = functi
2021-03-19 15:48:49
372
原创 js模块化之requireJs的基本使用
官网文档：https://requirejs.org/什么是require.jsRequireJS的目标是鼓励代码的模块化，它使用了不同于传统script标签的脚本加载步骤。可以用它来加速、优化代码，但其主要目的还是为了代码的模块化。它鼓励在使用脚本时以module ID替代URL地址。为什么要使用require.js平时我们写js脚本的时候，javascript代码直接扔在script标签里面就完事了，反正代码不多，交互简单，逻辑不难，和HTML混在一起也未尝不可，后来交互越来越复杂，代码越多越多
2021-03-12 15:37:58
640
1
原创 grunt构建工具的基本使用
grunt，JavaScript 世界的构建工具，官网是这样评价的，https://www.gruntjs.net/grunt一个前端构建工具，有资源压缩，代码检查，文件合并等功能可以看着官网的文档进行学习一、环境配置grunt是基于nodejs的，所以需要一个 nodejs 环境首先要保证grunt命令可以使用，所以要先使用npm安装对应CLInpm install -g grunt-cli二、使用方法在使用grunt之前，我们需要在项目根目录下创建pakage.json和Gruntfi
2021-03-04 21:14:58
559
2
原创 canvas改变图片原始尺寸
原理：确定canvas画布大小，将图片画到画布上，然后导出图片，就这么简单画布大小，需要得到原始图片宽高比例，然后选择画布的宽计算出高代码：<div class="imagehandler_setting"> <span class="imagehandler_chooseFile">选择文件</span> <input id="upload-input" type="file" accept="image/*" style="display:
2021-01-11 10:19:13
3908
1
原创 前端图片拼接
此处图片拼接分为横向拼接与纵向拼接，成品网站：https://www.onlinedo.cn/img-concat直接上代码：html<h1 class="mainIndex_title">图片拼接</h1><div class="imgConcat_main"> <div class="dragImgBox" id="dropZone">请拖拽本地图片文件到此处</div> <div class="imgConcat_bt
2021-01-07 20:22:17
1373
原创 前端在线录屏
文档：https://developer.mozilla.org/en-US/docs/Web/API/Screen_Capture_APIdemohtml:<h1><u style='color:#fc5c65'>在线屏幕录制</u></h1><video autoplay='true' id='video' controls='true' controlsList='nodownload'></video><butt
2020-12-21 20:21:34
574
2
原创 前端gif压缩
一开始做这个需求的时候，我在网上看了好多在线压缩gif的工具，基本上都是后台实现的，没看到一个纯前端实现压缩的。只能自己想办法了，一开始我的思路是：方案一：将gif分解，得到一帧一帧的图片，然后将每帧的图片进行压缩，然后再合并成gif。方案二：将gif分解，然后抽帧，再合并。两种方案我都试过了，合并出来的gif图更大了，垃圾后面我只能去gifhub上找了，好不容易找到一个，地址我忘了，找不到了，压缩的js我上传到我的资源里（免费）gif.js是压缩库deal.js是下载方法有了这个库，实现过程就
2020-12-17 18:25:27
1478
11
原创 前端视频转音频
纯前端将视频文件处理成音频文件有很多人都觉得不可能，一开始我也觉得做不到，网上查了很多资料，github上也找了，基本上都没有，后来在bejson上看到了视频转音频，然后就copy了一下。我的处理：两个处理js文件：deal.js(处理音频文件下载)，work.js(处理视频转音频)deal.js(function(n) { var t, i; if (n.URL = n.URL || n.webkitURL, n.Blob && n.URL) try { new Blob;
2020-12-14 10:44:06
922
2
原创 gif转为帧（gif分解）加分解图片批量打包下载
用到的库：处理gif图：https://github.com/buzzfeed/libgif-js图片批量打包下载：https://github.com/dschwen/jsziphttps://github.com/eligrey/FileSaver.js用法：html<body> <p style="font-size: 28px; text-align: center;font-weight: bold;line-height: 46px;">在线GIF转成帧&
2020-12-10 15:29:17
1150
1
原创 前端图片压缩（几乎无损）
前端经常会有图片压缩这样的需求，我尝试过很多种压缩方法，最后决定推荐lrz压缩方式lrz(file, [options]);1、file 通过 input:file 得到的文件，或者直接传入图片路径2、[options] 这个参数允许忽略3、width {Number} 图片最大不超过的宽度，默认为原图宽度，高度不设时会适应宽度。4、height {Number} 同上5、quality {Number} 图片压缩质量，取值 0 - 1，默认为0.7库的话直接去http://www.bejso
2020-12-03 19:58:25
6715
原创 js base64加密与解密
方法：var Base64 = { _keyStr: "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=", encode: function(e) { var t = ""; var n, r, i, s, o, u, a; var f = 0; e = Base64._utf8_encode(e
2020-11-25 15:44:46
471
转载 js网络图片转base64
先拿到一张图片地址：var imgUrl = "https://www.callmysoft.com/static/index/images/image_dgital%20creativity.png"第一种方式：利用canvas，canvas.toDataURL()方法需要解决图片跨域问题 image.crossOrigin = ‘’;使用了Jquery库的$.Deferred()方法// 缩略图路径处理成base64function getBase64Image(img, width,
2020-11-25 15:40:39
3286
4
原创 iframe的基本使用
当一个页面使用了iframe作为嵌套时，如何想要将父页面的数据传给iframe子页面，那iframe所指向的呢个子页面是怎么获取呢，又或者子页面的数据要给父页面使用，那么父页面又如何获取子页面的数据呢？父页面获取子页面中的变量与方法： <iframe id="file_iframe" name="file_iframe" src="" frameborder="0" style=" width:300px;height: 200px;"></iframe>window.par
2020-11-13 11:24:47
713
原创 js根据后台返回的数据生成excel并下载
模拟后台数据var _json = [ { dd_id:2020110201, d_code:"88888888888888888888888" }, { dd_id:2020110202, d_code:"99999999999999999999999" }, { dd_id:2020110203,
2020-11-02 17:16:11
1325
4
原创 构造函数中的this与jq中的this冲突解决方法
通常我们写构造函数都是这样写// 文件构造函数 业务类function File(json,popupWindowShow,recordFilePath){ //这里的this是指向构造函数本身 this._json = json; //客户端传入的数据 this.popupWindowShow = popupWindowShow; this.recordFilePath = recordFilePath;}// 获取用户设置信息File.prototype.getUser
2020-10-30 11:20:10
357
原创 js简单的模糊搜索
直接看代码// 搜索模糊查询 list:列表 ，keyWord:搜索关键字 searh:(list, keyWord)=>{ var reg = new RegExp((keyWord).toUpperCase().replace(/\s/g,"")); var arr = []; for (var i = 0; i < list.length; i++) { 如果需要加另外条件可以在下面加 if (reg.test(list[i].
2020-10-30 11:01:10
355
原创 js--文件字节大小转换--大小排序--时间排序
文件字节转换为B,KB,MB,GB // 计算文件大小 limit:传入的文件字节大小 changSzie: (limit) => { var size = ""; if(limit < 0.1 * 1024){ if(limit < 0.1 * 100){ size = 0; } else{ size = limit.toFixed(2) + "B" //小于0.1KB，则转化成B
2020-10-30 10:54:07
517
原创 jq搜索关键字高亮显示
在我们平时做项目经常会遇到关键字需要高亮显示的情况，算了 不编了，写不下去了，直接看代码吧 var searchText = keyword;//获取你输入的关键字； var regExp = new RegExp(searchText, "g");//创建正则表达式 $(".searchListBox .prolist-title a").each(function()//遍历文字； { var html = $(this).ht
2020-10-29 17:08:40
1060
原创 input框输入验证及样式修改
输入大小写字母、数字、下划线：<input type="text" onkeyup="this.value=this.value.replace(/[^\w_]/g,'');"> 输入小写字母、数字、下划线：<input type="text" onkeyup="this.value=this.value.replace(/[^a-z0-9_]/g,'');"> 输入数字和点<input type="text" onkeyup="value=value.rep
2020-10-15 11:46:08
832
原创 日期控件与省市县控件的使用
jeDate日期控件 -（原生JS版）jeDate V6.5.0 是一款原生JS开发的 不依赖任何第三方库 大众化的日期控件api文档地址：[http://www.jemui.com/uidoc/jedate.html](http://www.jemui.com/uidoc/jedate. html)浏览器兼容，下面是我们的主要兼容目标1、IE8 或者 IE8以上 (Windows), IE8以下浏览器不兼容2、Safari (Mac) 苹果浏览器3、Chrome (Windows, Mac,
2020-09-17 17:48:39
272
原创 基于vue-element-template项目开发总结（五）
打包，优化，上线项目打包直接npm run build，途中可能会遇到各种问题，但是都是小问题，百度解决就可以了打包成功后我们会发现页面首屏加载会特别的慢，我自己打包出来的第一次打开需要20秒，这样的速度肯定是不行的，会被捶死的，那只能想办法优化了1.cdn引入插件打包之前将public中的index.html修改<!DOCTYPE html><html> <head> <meta charset="utf-8"> <me
2020-09-09 16:50:14
552
1
原创 基于vue-element-template项目开发总结（四）
这篇讲动态路由生成及权限管理，我做项目的时候其实也不是生成动态路由，感觉自己生成动态路由挺麻烦的，就换了一种思路，不同权限的管理员看到的侧边栏是不同的，然后侧边栏是根据我们写的路由表生成的然后我们可以换一种思路，直接根据后台返回的数据操作侧边栏，这个就要跟后台协商好，在登录的时候根据不同的角色返回一个菜单列表，存入session中，我们根据这个菜单列表来生成侧边栏然后在侧边栏的vue中取出来渲染这样我们的路由权限也就做好了接下来就是按钮权限这个管理员权限设置就不多讲了，比较简单我做的这个
2020-09-09 16:17:43
619
原创 基于vue-element-template项目开发总结（三）
这一篇讲项目中常用插件的使用方式1.vue-quill-editor现在市面上有很多的富文本编辑器，我个人还是非常推荐vue-quill-deitor，界面简洁，操作简单，虽然只支持ie10+，但是我觉得已经足够了安装：npm install vue-quill-editor安装依赖项：npm install quill在main.js中进行引入 注：css一定要引入import Vue from 'vue'import VueQuillEditor from 'vue
2020-09-09 15:30:42
800
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人