雅荷心语博客
雅荷心语
心之所向便是光
  • 首页
  • 前端之旅
  • 后端之路
  • 软件工具
  • 心灵鸡汤
  • 心路历程
  • 视频资料
  • 关于我们
    • 关于我
    • 关于我
  • 微信平台
    • 业务合作
  • 首页
  • 前端之旅
  • 后端之路
  • 软件工具
  • 心灵鸡汤
  • 心路历程
  • 视频资料
  • 关于我们
    • 关于我
    • 关于我
  • 微信平台
    • 业务合作
  • 关注本站
    • 微信
    • 微博
    • 腾讯微博
    • Twitter
    • Facebook
    • RSS订阅
Hi, 请登录     我要注册     找回密码
分享到：

前端之旅

去分类设置中添加分类描述吧

liunx 下安装pdftk / npm pdf-merge 依赖安装

2020-10-26admin阅读(8)评论(0)

安装依赖

1
yum install gcc gcc-c++ libXrandr gtk2 libXtst libart_lgpl

安装libgcj
下载地址：http://rpmfind.net/linux/rpm2html/search.php?query=libgcj

1
rpm -ivh --nodeps libgcj-4.4.7-16.el6.x86_64.rpm

安装PDFtk
下载地址：https://www.pdflabs.com/docs/install-pdftk-on-redhat-or-centos/

1
yum install pdftk-2.02-1.el6.x86_64.rpm

pdftk -version

 

王者荣耀隐藏字符生成器-重名生成器及原理分析

2020-08-28admin阅读(1719)评论(0)

经常看到有人游戏里是空白的名字, 之前也没有在意过, 突然有一天看到一个抖音, 提到了隐藏字符的问题, 于是根据抖音提示找到一个带有隐藏名字的人, 复制昵称研究了一番, 终于发现了隐藏字符的秘密㊙️

过程分析:

首先我拿到空白字符之后, 复制出来什么也看不到, 昵称中带符号也看不到符号, 但是我们将带有特殊符号的昵称 经过 base64 编码, 就会发现端倪

1
2
3
4
5
6
7
8
<?php
$str1 = '天明⁡⁣⁡⁣';
$str2 = '天明';
print_r(base64_encode($str1));
print_r(PHP_EOL);
print_r(base64_encode($str2));
print_r(PHP_EOL);
print_r(base64_decode('4oGh4oGj'));

其中$str1 带有隐藏字符, $str2 没有, 经过base64 编码, 发现虽然肉眼看上去一样, 但是 编码过后长度不一样, 剔除 天明 这两个字本身的编码, 剩下的就是 隐藏字符的base64码!

有了这个, 我们就可以自己来控制了, 自己随便起个名字, 然后前后插入编码, 就可以实现重名, 隐藏中间有隐藏字符不显示!

为了方便大家, 我简单写了一个 王者荣耀 重名/生成器, 喜欢的可以直接使用哦~

或者直接打开链接: http://api.he29.com/index.php/index/game/v5.html

qrcode

输入你想要的名字, 然后我会随机在里面插入隐藏字符, 点击复制以后直接打开游戏修改, 如果修改失败, 可能带隐藏字符的名字也被人占了, 嗯当然这种概率极低, 如果还是修改不成功,

可以联系我再生成隐藏字符~~

祝大家早日上荣耀~

JavaScript读取.xlsx文件为json

2020-08-26admin阅读(116)评论(0)

代码备份 js 部分

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
$(document).ready(function(){
    $("#fileUploader").change(function(evt){
      var selectedFile = evt.target.files[0];
      var reader = new FileReader();
      // 读取上传文件为二进制
      reader.readAsBinaryString(selectedFile);
      reader.onload = function(event) {
        var data = event.target.result;
        var workbook = XLSX.read(data, {
          type: 'binary'
        });
        workbook.SheetNames.forEach(function(sheetName) {
          var XL_row_object = XLSX.utils.sheet_to_row_object_array(workbook.Sheets[sheetName]);
          if (XL_row_object.length > 0) {
            console.log(XL_row_object)
          }
        })
      };
      reader.onerror = function(event) {
        console.error("File could not be read! Code " + event.target.error.code);
      };
    });
  });

html 部分

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script type="text/javascript" src="http://cdn.bootcdn.net/ajax/libs/xlsx/0.16.6/xlsx.full.min.js"></script>
</head>
<body>
<div class="body">
  <input type="file" id="fileUploader" name="fileUploader" accept=".xls, .xlsx"/>
</div>
</body>
</html>

示例:

iShot2020-08-2616.08.59

File 文件

id name age card
1 天明1 12 1111
2 天明2 13 1112
3 天明3 14 1113
4 天明4 15 1114
5 天明5 16 1115
6 天明6 17 1116
7 天明7 18 1117
8 天明8 19 1118
9 天明9 20 1119

教你怎么在微信公众号文章插入720全景图片

2020-08-20admin阅读(277)评论(0)

微信公众号文章里面插入全景图片, 你知道怎么操作吗?

先看看效果预览!

 

首先, 我们需要有一张全景图, 例如:

然后打开微信: 搜索🔍小程序:  微云全景

打开后点击发布, 然后添加全景图:

点击发布全景作品

稍等片刻发布成功, 然后点击查看全景展示是否有误!

无误后, 打开微信公众号文章发布页面

在顶部点击小程序

输入自己的微信号,点击开启

然后打开微信小程序, 找到自己发布的全景:

就可以看到复制链接功能, 点击复制链接, 把复制好的链接粘贴到这里, 就可以插入到文章里面了!

网页使用js屏蔽鼠标右键及一些快捷按键

2020-06-04admin阅读(126)评论(0)

不多说了, 先记下来

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
document.oncontextmenu = function (evt) {
evt = evt || window.event;
evt.returnValue = false;
}//屏蔽鼠标右键
document.onselectstart = function (evt) {
evt = evt || window.event;
evt.returnValue = false;
}//屏蔽鼠标选择
window.onhelp = function () {
return false;
} //屏蔽F1帮助
document.onmousewheel = function (evt)//屏蔽Shift+滚轮,Ctrl+滚轮
{
evt = evt || window.event;
if (evt.shiftKey || evt.ctrlKey) {
evt.keyCode = 0;
evt.returnValue = false;
}
}
document.onkeydown = function (evt) {
evt = evt || window.event;
if (evt.keyCode == 91) {
evt.keyCode = 0;
evt.returnValue = false;
}  //屏蔽Window左
if (evt.keyCode == 92) {
evt.keyCode = 0;
evt.returnValue = false;
}  //屏蔽Window右
if (evt.keyCode == 27) {
evt.keyCode = 0;
evt.returnValue = false;
}  //屏蔽ESC
if (evt.keyCode == 114) {
evt.keyCode = 0;
evt.returnValue = false;
}  //屏蔽F3
if (evt.keyCode == 116) {
evt.keyCode = 0;
evt.returnValue = false;
}  //屏蔽F5
if (evt.keyCode == 117) {
evt.keyCode = 0;
evt.returnValue = false;
}  //屏蔽F6
if (evt.keyCode == 118) {
evt.keyCode = 0;
evt.returnValue = false;
}  //屏蔽F7
if (evt.keyCode == 122) {
evt.keyCode = 0;
evt.returnValue = false;
}  //屏蔽F11
if (evt.keyCode == 123) {
evt.keyCode = 0;
evt.returnValue = false;
}  //屏蔽F12
if (evt.ctrlKey && evt.keyCode == 67) {
evt.keyCode = 0;
evt.returnValue = false;
} //屏蔽 Ctrl+c
if (evt.ctrlKey && evt.keyCode == 86) {
evt.keyCode = 0;
evt.returnValue = false;
} //屏蔽 Ctrl+v
if (evt.ctrlKey && evt.keyCode == 70) {
evt.keyCode = 0;
evt.returnValue = false;
} //屏蔽 Ctrl+f
if (evt.ctrlKey && evt.keyCode == 87) {
evt.keyCode = 0;
evt.returnValue = false;
} //屏蔽 Ctrl+w
if (evt.ctrlKey && evt.keyCode == 69) {
evt.keyCode = 0;
evt.returnValue = false;
} //屏蔽 Ctrl+e
if (evt.ctrlKey && evt.keyCode == 72) {
evt.keyCode = 0;
evt.returnValue = false;
} //屏蔽 Ctrl+h
if (evt.ctrlKey && evt.keyCode == 73) {
evt.keyCode = 0;
evt.returnValue = false;
} //屏蔽 Ctrl+i
if (evt.ctrlKey && evt.keyCode == 79) {
evt.keyCode = 0;
evt.returnValue = false;
} //屏蔽 Ctrl+o
if (evt.ctrlKey && evt.keyCode == 76) {
evt.keyCode = 0;
evt.returnValue = false;
} //屏蔽 Ctrl+l
if (evt.ctrlKey && evt.keyCode == 80) {
evt.keyCode = 0;
evt.returnValue = false;
} //屏蔽 Ctrl+p
if (evt.ctrlKey && evt.keyCode == 66) {
evt.keyCode = 0;
evt.returnValue = false;
} //屏蔽 Ctrl+b
if (evt.ctrlKey && evt.keyCode == 78) {
evt.keyCode = 0;
evt.returnValue = false;
}  //屏蔽 Ctrl+n
if (evt.shiftKey && evt.keyCode == 121) {
evt.keyCode = 0;
evt.returnValue = false;
}  //屏蔽 shift+F10
if (evt.srcElement.tagName == "A" && window.evt.shiftKey) {
evt.keyCode = 0;
evt.returnValue = false;
}             //屏蔽 shift 加鼠标左键新开一网页
}
 
document.onmousedown = function (evt) {
try {
evt = evt || window.event;
if (evt.button == 4) {
evt.keyCode = 0;
evt.returnValue = false;
} //屏蔽鼠标中键
} catch (e) {
}
}

 

如何快速的发布一个vue组件

2020-04-06admin阅读(155)评论(0)

今天准备把我的一些常用组件发布到npm包里, 但是找了一圈资料都是特别繁琐的教程, 于是简单的研究了一下;

关于如何注册 https://www.npmjs.com/ 就不 多说了, 主要说说发布的事情;

首先看看 vue 的文档, 快速启动一个vue 服务;

https://cli.vuejs.org/zh/guide/prototyping.html#vue-serve

其实大概意思就是, 本地新建一个 xxx.vue, 然后直接把这个文件启动起来

比如我在本地新建一个 app.vue

app.vue 里面写正常 vue组件的内容

1
2
3
4
5
&lt;template&gt;
&lt;div class="app"&gt;
  helo 天明
&lt;/div&gt;
&lt;/template&gt;

然后启动起来

1
vue serve app.vue

打开浏览器顺利看到内容, 如果这是我的一个组件的话, 那我再把组件导出,

为什么要走上面这几步呢, 是为了调试组件, 如果你很厉害, 组件不需要调试, 可以直接从下面开始~~~

根目录新建一个 index.js

导出组件, 类似于

1
2
3
4
5
6
7
8
9
10
11
12
/**
* Created by PhpStorm.
* User:  iyahe@qq.com (天明)
* Date: 2020/4/5
* Time: 21:58
* Description:
*/
module.exports = {
toAdd: require("./components/toAdd"),
tabar: require('./components/taBar'),
swiper: require('./components/swiper')
}

 

然后呢, 修改package.json 里面的  “private”:false,

大概是因为私有的npm不让发布;

其实这样, 我们就可以发布了,

发布流程和网上大家发的一样! 具体就不细写了

比如 npm login

然后

1
npm publish --access public

发布成功之后, 我们怎么使用呢?

1
import {toAdd} from '@tianmin/uniapp-modules'

这样就行了, 和使用本地组件一样!

这是我发布的一个测试组件: https://www.npmjs.com/package/@tianmin/uniapp-modules

这样看下来, 发布一个组件其实很简单!

 

新浪微博/QQ空间全景图exif信息修复及图片xmp元数据处理的一些事

2020-02-07admin阅读(544)评论(0)

前段时间用无人机拍了一些全景图片准备发在微博, 毕竟我可是为数不多的新浪微博 全景达人 认证 / 哈哈哈.jpg

我的微博: 移动云全景

使用工具恢复数据之后我发出去的微博全景:  https://m.weibo.cn/z/panorama?oid=1042143:4469411109601303

后来才发现, 使用无人机合成的全景图片新浪微博无法识别, 而且QQ空间也无法识别, 当时我就猜测是因为 exif 信息被删掉导致的, 最近回京了., 疫情还是很严重, 在家办公有时间了, 就抽空做了一个小工具, 用来恢复 全景图丢失的图片 exif 数据!

新浪微博/QQ空间全景图exif信息恢复工具

刚开始我的想法是, 使用 exif.js 来直接读取 图片的 exif 信息, 然后使用 piexif.js 直接写入, 然后保存, 都不经过服务端, 客户端网页直接处理完, 后来才发现不是这样!

普通图片的exif 信息可以这样恢复, 但是全景图片不行, 我来回对比, 几乎把 exif 所有信息全部恢复了, 微博也无法识别, 后来才发现, 全景图片的特殊性, 要操作图片元数据里面的 GPano 才可以,

而xmp元数据, 我使用js在客户端来回折腾也无法修改和恢复(技术太差);

而要识别为全景图, 只需要 在元数据里加入

<GPano:ProjectionType>equirectangular</GPano:ProjectionType>

<GPano:UsePanoramaViewer>True</GPano:UsePanoramaViewer>

就可以, 但是 客户端又无法操作, 所以只能通过cdn网络走服务端了!

于是先把图片上传到cdn, 然后通知php服务去操作 xmp 元数据, 操作完成之后, 为了速度更快, 又上传到cdn, 客户端再展示., 后来为了节省cdn资源, 又做了延迟队列, 10分钟之后删除图片等等,.

队列使用的是redis的订阅发布机制, 之前博文有写过: http://blog.he29.com/wblog/?p=1161

不过最终是完成了, 就是传输速度还是不快, 如果是超过5M的全景图, 则需要等待10s以上~~

不过, 目前网络上用来恢复全景图数据的插件很少, 我只看到一个使用.bat文件来恢复的脚本, 这个小工具应该可以帮助到不少的人!

 

下载

扫描二维码用手机来试试看吧!

使用nodejs把vue编译的dist目录文件上传到阿里云的oss

2019-12-31admin阅读(764)评论(0)

目前我的小程序 微云720在线全景 里面的资源都是在自己服务端,

因为服务端宽带是1M,总感觉速度不是很快,今天就抽时间写了个工具,把资源文件都上传到阿里云oss里面,增加访问速度!!!

基于阿里云的上传类ali-oss,

目前已经发布在 npm, 可以直接安装使用!

npm i webuposs –save

基本配置如下:

1
2
3
4
5
6
7
8
9
10
const rsync = require('webuposs');
const path = require("path");
new rsync({
region: 'oss-cn-beijing', //区域(EndPoint（地域节点）, 例如: oss-cn-beijing.aliyuncs.com),
accessKeyId: '',
accessKeySecret: '',
bucket: '',
bucketDir: 'static/test', // 上传到阿里云oss之后的地址
localDir: path.join(__dirname,  'dist') // 本地地址
}).upload();

配置参数填写正确后, 启动文件, 将会把

当前目录 dist 下面的所有文件同步到 配置的 bucket, 目录是 bucketDir

例如以当前配置上传一个文件, 我的dist目录有一个xxx.js

上传之后,

我的访问地址是: 阿里云外网地址/static/test/xxx.js

微云全景在线体验地址: https://ar.he29.com/v2/tour/index?id=213

可以很明晰感觉到, 所有的资源加载时间都在100ms以内!!!

 

让你的webstorm/phpstorm 编辑器支持nodejs 代码提示

2019-12-24admin阅读(604)评论(0)

一直在找怎么能让编辑器支持nodejs 的代码提示, 每次写代码都要查文档, 今天终于找到了方法!

1. 先安装typings这个包

npm install -g typings

输入 typings –version 出现版本号 说明安装成功

2.通过上面的命令，typings这个包就下载下来了，然后我们到项目开发目录，

打开终端，输入: typings init 这时当前目录下会出现一个typings.json的文件，这个文件就是typing的配置文件

这个文件类似packet.json, 然后我们安装

typings install dt~node –global–save

typings install dt~jquery –global –save

4-42

接下来之后就可以直接试试效果了!

终于不用脑补关键词了…

vue设置代理字段详解

2019-12-21admin阅读(550)评论(0)

这里的vue代理是 vue静态服务器做代理。使用的是 http-proxy-middleware 这个模块（这个模块相当于是node.js的一个插件）。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
module.exports = {
  devServer: {
    proxy: {
      '/admin': {
        target: 'http://ar.he29.com/', //对应自己的接口
        changeOrigin: true,
        ws: true,
        secure: true, //如果是https接口，需要配置这个参数
        pathRewrite: {
          // '^/api': ''
        }
      }
    }
  }
}

 

我的 api=’/admin’
我的请求地址 ${api}/xxxx/xxx ，请求地址就为 ‘/admin/xxxx/xxx’
当node服务器 遇到 以 ‘/admin’ 开头的请求，就会把 target 字段加上，那么我的请求地址就为 http://ar.he29.com/admin/xxxx/xxx
下面的 pathRewrite 表示的意思是 把/api 替换为 空，那么我的请求地址就为 http://ar.he29.com/xxxx/xxx（用在如果你的实际请求地址没有 api 的情况）

  • 1
  • 2
  • 3
  • 4
  • ...
  • 下一页
  • 共 10 页
关于我

小天明 北京·朝阳 前端搬砖工程师

碎碎念):(来自公众号)

热门文章

  • 踩坑记录——iphone上safari开启隐身模式时localStorage变为只读-雅荷心语博客踩坑记录——iphone上safari开启隐身模式时localStorage变为只读2017-02-21评论(4)
  • 程序员是怎样一群人-雅荷心语博客程序员是怎样一群人2015-12-08评论(3)
  • vcard - 二维码名片的格式及扫码导入-雅荷心语博客vcard – 二维码名片的格式及扫码导入2016-05-05评论(2)
  • call_user_func_array 这个函数什么时候用-雅荷心语博客call_user_func_array 这个函数什么时候用2016-09-02评论(2)
  • PHP 非对称加密 openssl 加密及解密方法-雅荷心语博客PHP 非对称加密 openssl 加密及解密方法2016-05-17评论(2)
2020年十月
一 二 三 四 五 六 日
« 八    
 1234
567891011
12131415161718
19202122232425
262728293031  

最新评论

  • 前端小武 4年前 (2017-04-06)说：
    我看到了layer
  • 丁艳平 4年前 (2017-03-03)说：
  • Dawn 4年前 (2016-09-16)说：
    call_user_func_array最后的例子是错哦，你用bc方法去调用类里 另外一个方法就知道问题所在了。情况1.调用非静态方法 第一个参数应该传[类的实例,调用方法] (既然有类实例了直接-&
  • Dawn 4年前 (2016-06-21)说：
    tp框架设置了全局捕获异常的，这也没什么。坑的是 他捕获了异常。然后全部返回404。。。不知道的 还以为自己网站被删除了
  • Dawn 5年前 (2016-05-17)说：
    构造函数里的判断 用异常机制可能更好一些

左邻右舍

  • Brian's Blog
  • 易水寒
  • 楼教主
  • 贤心
  • 阿米龙

雅荷心语博客 -心之所向便是光

联系我们关于我们

© 2020 雅荷心语博客   网站地图

emlogdux_heademlogdux_footer