- 博客(46)
- 收藏
- 关注
RSS订阅原创 图片旋转处理
浏览器图片旋转的兼容处理需求： 在项目中，我们经常要实现用户上传图像的功能，由于图像“太大"或者"压缩上传服务器"或者“本地处理图片”，我们经常会用canvas对图片进行2次处理。在最近的一次开发中我发现，ios低系统、ios（13.4.1之后）高系统对图片的旋转处理不同。并且我还研究了android及chrome对旋转图片的处理，下面我研究的成功，分享给大家。手机拍摄旋转图片ios和android的区别： 用户用手机拍照的时候，会不同方向的旋转拍照，...
2020-06-29 10:01:44
591
原创 常用命令总结
查看进程信息： ps -ef|grep mysql 打开文件： open ~/1.txt 打开 /Users/B612/1.txt（B612用户电脑昵称,我的是B612），绝对路径 open 1.txt 打开 /Users/B612/1.txt（B612用户电脑昵称,...
2020-04-04 10:49:06
148
原创 koa2-cors 应用
koa2-cors 应用：用于设置允许跨域案例： 后台代码const Koa = require('koa');const Cors = require('koa2-cors');const App = new Koa()App.use(Cors());App.use((ctx)=>{ if(ctx.url == '/'){ ct...
2020-04-03 15:44:53
304
原创 koa-multer 实现图片上传
案例上传单张图片const Koa = require('koa');const multer = require('koa-multer');const Router = require('koa-router')();const App = new Koa();const storage = multer.diskStorage({ destination:fun...
2020-04-03 11:46:05
844
原创 koa-session 识别用户及应用
解决的问题：因为http是无状态的，所以服务器不知道是哪个客户端在请求服务。koa-session 通过生成不同的cookie到浏览器端，后续请求的请求头会携带这些cookie信息，来实现识别客户端。常用于登陆模块。案例：const Koa = require('koa');const Session = require('koa-session');/** * 用于配合...
2020-04-03 07:54:33
286
原创 cookie简介及应用
cookie简介：cookie 是存储在计算机上的变量。当我们用同一个浏览器访问同一个域名下的网页的时候，都可以拿到cookie的值。 当我们初次访问一个页面的时候，服务器在http请求的相应报文中，命令浏览器储存cookie。以后我们在同一个浏览器访问该域时，http请求的报文都会携带cookie过去的，看下图 ： 初次访问接口 ： http://localhos...
2020-04-03 07:28:26
204
原创 koa-static 设置静态资源目录
1.koa-static 设置静态资源目录应用： 静态资源如png,jpg,jpeg,gif,css,js ，当我们应用koa-static中间件设置静态文件目录时，浏览器可以直接访问静态资源。 案例： 项目文件目录： demo8文件代码如下：const Koa = require('koa');...
2020-04-02 12:04:11
2657
1
原创 koa-bodyparser 解析post请求中的参数
1. koa-bodyparser 将上下文的formdata数据解析到ctx.request.body上const Koa = require('koa');const bodyParser = require('koa-bodyparser');const Router = require('koa-router')()const App = new Koa();App.use(...
2020-04-01 19:14:08
1152
转载 koa 获取post请求
目录原理：注意：实例：原理：对于POST请求的处理，koa2没有封装获取参数的方法，需要通过解析上下文context中的原生node.js请求对象req，将POST表单数据解析成query string（例如：a=1&b=2&c=3），再将query string 解析成JSON格式（例如：{"a":"1", "b":"2", "c":"3"}）注意：...
2020-04-01 18:48:59
1042
原创 koa 中间件概念及应用
原理：koa 实例化对象的use方法中的回调函数，如下面实例中的App.use((ctx,next)=>{})，有ctx，next两个参数。 可以ctx的request，response对象，可以终结相应，只有调用 next() 才会调用下一个中间件，如果没有调用，next方法， 则不能继续下一个中间件应用： 应用中间件在请求刚进入服务时，必须执行...
2020-04-01 17:27:05
370
转载 koa-router 获取path参数
目录koa-router 获取path参数实现原理： /:id 设置动态路由，用户请求时，可以获取动态的path参数ctx.params 获取动态路由Router.get('/product/:id',function(){}) 中的动态参数 案例 ： ...
2020-04-01 16:13:23
2366
翻译 koa-router get请求获取query参数
目录get请求获取query参数实现方式：request.query query对象request.querystring query 字符串例如： http://localhost:3000/news?a=36&b=37request.query {a:36...
2020-04-01 15:53:48
3529
原创 koa-router简单使用
目录koa-router 实现路由const Koa = require('koa');/** * 调用方式 * */const Router = require('koa-router')();const App = new Koa();Router.get('/',(ctx,next)=>{ ctx.body = 'Hello koa';})Rout...
2020-04-01 15:31:38
330
原创 koa2基础篇
目录Hello world/** * hello world */const Koa = require('koa');const App = new Koa();console.log(Koa);App.use(async (ctx)=>{ ctx.body = 'hello world'});App.listen('3000',()=>{...
2020-04-01 15:00:46
135
原创 koa2开发环境搭建
目录koa2开发环境搭建 1.全局安装koa2-generator npminstall-gkoa2-generator 2.创建项目 如：koa2 --view=ejs teaching-01 && cd teaching-01 --view=ejs 指定html...
2020-04-01 10:10:18
346
原创 构造函数的this，原型中的this，构造函数方法中的this
结论：构造函数中的this和原型方法中的“this” 都指向 构造函数的实例话对象， 构造函数的方法中的 this 指向构造函数例：function Persion(options){ this.name = "张三"; console.log(this) this._init(options)}Persion.prototype._init = function...
2019-11-13 17:05:11
622
原创 Object.getOwnPropertyNames 和 Object.keys()
var obj = {'a':'a','b':'b'};Object.defineProperties(obj,{ "c":{value:'c',enumerable:0}, "d":{value:'d',enumerable:!0}})// obj {a: "a", b: "b", d: "d", c: "c"}Object.keys(obj) //[...
2019-11-12 15:08:44
287
原创 常用的浏览器判断方式
我们做h5兼容开发或统计的时候经常用到平台的判断处理，下面是常用的浏览器判断方式var UA = inBrowser && window.navigator.userAgent.toLowerCase();var isIE = UA && /msie|trident/.test(UA);var isIE9 = UA && UA.indexOf...
2019-11-08 15:08:30
210
原创 属性的判断in和hasOwnProperty区别
1. hasOwnProperty 方法用于判断对象“自身”是否有某个属性：2. in 用于判断对象“自身”及其“继承对象”是否具有某个属性：例： let obj = {a:1,b:2};控制台查看： obj.hasOwnProperty('__proto__') // falseobj.hasOwnProperty('valueOf') ...
2019-11-08 14:41:09
404
原创 判断数组或对象结构是否相同
参考vue源码中的方法function looseEqual (a, b) { if (a === b) { return true } var isObjectA = isObject(a); var isObjectB = isObject(b); if (isObjectA && isObjectB) { try { ...
2019-11-07 19:17:14
376
原创 将 “驼峰字符串” 转 “连字符字符”
实现代码：var hyphenateRE = /\B([A-Z])/g;var hyphenate = function (str) { return str.replace(hyphenateRE, '-$1').toLowerCase()}hyphenate("containerId"); //container-id实现原理：replace方法的第二个...
2019-11-06 15:02:01
418
原创 将“连字符字符串”转化为驼峰字符串
一：实现代码：var camelizeRE = /-(\w)/g;function camelize(str){ return str.replace(camelizeRE,function(_,c){ return c ? c.toUpperCase():''; })}camelize('kkk-zzz-hhh'); kkkZzzHzz;二： 实...
2019-11-06 12:17:07
629
原创 js更精准的判断数据类型
toString 方法Number.toString() : var a=5; a.toString() // "5"String.toString() : var a = "jiji" a.toString() // "jiji"Boolean.toString() : var a = true; a.toString()...
2019-11-05 19:07:24
238
原创 vue-cli 升级3.0失败的解决办法
1.我的是mac电脑，目前的vue-cli版本是 2.9.6，当我升级3.x的时候，根据官网 npm uninstall -g vue-cli 卸载并且安装@vue-cli后，查看命令仍然是 2.9.6，查了半天资料，都不起作用，最后找到了一种方法，成功了。特此记录一下，希望帮助遇到该问题的开发者。mac 命令行：sudo npm install -g @vue/cli （意思是以...
2019-08-26 15:37:03
2131
2
原创 实现点击自身元素而不是子元素触发的js条件
如下：点击子元素时候不想触发<style>#parent{background: pink;width:50%;}#child{background: orange;height:300px;width: 300px;}</style><div id="grandFather" onclick="a...
2018-04-26 13:38:27
3060
1
原创 three 蒙皮动画核心过程
简介： 蒙皮动画：通过模拟人的运动来模拟3D物体的动画，游戏中也经常使用。制作蒙皮动画的主要过程和注意点：1. 制作蒙皮骨骼： var material = new THREE.MeshBasicMaterial({color: 0xfff000,wireframe:true,skinning : true}); mesh = new THREE.SkinnedMes...
2018-04-10 16:03:53
505
原创 texture中的 anisotropy属性，纹理的各向异性
定义：anisotropy： 沿通过具有最高纹理像素密度的像素的坐标轴取样的数量。默认情况下，此值为1.较高的值会产生比基本mipmap更少的模糊结果，但需要使用更多纹理样本。使用renderer.getMaxAnisotropy（）来查找GPU的最大有效各向异性值; 这个值通常是2的幂。这样能实现什么效果呢：如果大家想让物体缩小的时候，任然比较清晰，可以将 anisotropy： 设大；我们看一...
2018-04-04 17:36:19
4632
原创 three 中 shadow的常用参数
当我们投射阴影的时候如果想调节阴影的清晰度：可以将 shadow.mapSize 设置为更大的值： light.shadow.map.width = light.shadow.map.height = 1024 // 还可以选的值 128,256，512，2048等当我们投射阴影的时候如果想调节阴影的大小：可以设置 shadow.camera 的参数：var d = 50;light.s...
2018-04-04 17:28:05
1292
原创 场景快速切换放大到某一部分
简介我们在做直播的时候，可能场景中某左下角突然出现了一个非常惊人的意外，那么我们怎么能快速的切换到场景的左下角呢？案例实现过程图解 《1》。首先添加全景图，如上所示，场景x轴，z轴分为四个象限，分别在各个象限中添加不同颜色的方块《2》。点击 w键，页面切换到第四象限，也就是红色区域效果如下：《3》点击s键切换到第二象限的位置：《4》同理点击a切换到白色方块，点击d键切换到黄色方块区域： ...
2018-03-30 11:13:12
483
原创 camera中lookAt的理解
camera为相机看的目标点：因为屏幕显示的是相机视椎体的可视范围，而相机的lookAt方法指的是相机观察的目标点，故可以得出：相机lookAt的点一定显示在屏幕的正中央：利用这点，我们可以实现物体移动时，我们可以一直跟踪物体，让物体永远在屏幕的中央：一下是代码实现<!doctype html><html lang="en"><head> <meta...
2018-03-26 19:54:38
12948
原创 geometry 的偏移（translate）和mesh的偏移的区别
geometry中的偏移，是物体的网格偏移了，，但是物体的世界的坐标还在原来的位置：这样可以很简单的实现一个绕着世界坐标的中心点旋转的物体效果：1. 怎么实现物体绕这世界坐标的中心点旋转：实现的思路是：网格（geometry）先偏移（translate），以后生成网格物体（mesh），最后网格旋转，实现代码如下：var geo = new THREE.BoxGeometry(10,10,10);...
2018-03-26 19:24:38
3359
2
原创 相机的视椎体范围就是屏幕显示的范围
1.计算机屏幕显示的是相机视椎体的范围：如下： 对于透视相机，当我设置camera为如下参数：camera = new THREE.PerspectiveCamera(20,width/height,1,1000);屏幕的显示效果如下：当我设置相机的参数如下：camera = new THREE.PerspectiveCamera(60,width/height,1,1000);效果如下：视角改...
2018-03-26 19:21:06
1282
翻译 three中的renderer剪刀（setScissor,setScissorTest）的用法
这里不多介绍，给你们推介以下可以参考的资料：https://github.com/mrdoob/three.js/blob/master/examples/webgl_multiple_views.html点击打开链接http://tmp.linhongxu.com/learnThreejs/cameras.html ...
2018-03-15 16:13:54
1500
翻译 webgl中的基本坐标系统
在构造和显示场景的过程中会使用几个不同的笛卡尔坐标系：建模坐标系（几部坐标系）: 在各自的坐标系统中构造每一个对象的形状，比如自己构造的车，树，花等模型。世界坐标系：一旦构建好模型后，就可以将对象放到称为世界坐标系的场景参考系的相应位置。这一步涉及到单独的局部坐标系到世界坐标系的指定位置和方向的变化。观察流水线：在描述完场景之后，要将该场景中的世界坐标系经过各种处理转化到一个或多个输出设备的坐标系...
2018-03-14 13:07:38
1821
翻译 光栅化扫描系统
简单的光栅化扫描系统：简单的光栅化系统如下图2.24所示，其中帧缓存可以在系统储存器的任意的位置，视频控制器通过访问帧缓冲来刷新屏幕。常用的光栅化系统：如图2.25，帧缓冲储存在系统储存器的固定区域，并且有视频控制器直接访问。...
2018-03-14 12:41:42
402
翻译 计算机图形学基础概念总结
刷新式CRT：快速控制电子束反复重画图像来维持荧光粉亮度的技术。刷新频率：CRT在屏幕上重复画画的频率称为刷新频率，也可以理解为显示器所能显示的像素有多少。分辨率：CRT无重叠显示的最多的点数称为分辨律。英寸： 1英寸等于2.54厘米。光栅化扫描系统：电子束横向扫描屏幕，一次一行，从顶到低依次进行，每一行称为一个扫描行，当电子束沿每一行移动时，电子束的强度不断变化，从而建立亮点组成一个图案。光栅...
2018-03-14 11:26:31
2638
1
原创 将blob对象转二进制buffer
一直做了一个websocket的项目，，接的是第三方接口，第三方接口有一个node案例，案例中，通过websocket返回的数据是直接是buffer对象，然后通过第三方库pako，进行解压。 但是在客户端，返回的数据是blob二进制数据，那么怎么将它向客户端进行解压呢？ 最后通过 renderer 对象成功解决：var render = new FileReader();rend...
2018-02-08 18:07:37
4740
原创 three Quaternion 源码解读
//Quaternion 执行一个四元数。这是用来旋转的东西， 而不会遇到可怕的 万向节锁问题等优点。function Quaternion( x,y,z,w ) ｛
2018-02-06 14:50:41
1309
原创 three 源码解析之 Euler
// 欧拉角function Euler( x,y,z,order ) { // 自定义 x,y,z,order，并且设定默认值 this._x= x ||0; this._y= y ||0; this._z= z ||0; this._order= order || Euler.DefaultOrder; // 默认值可以修改
2018-02-06 12:34:15
394
原创 传值和传址
传址案例如下： 当函数的参数传入一个对象时，，是传址，以为对象储存的是地址所以，，如果，你申明一个全局变量，想要接受函数执行的结果，一种非常有用的方式就是，申明一个全局变量为object，当作参数传入进去，最后再返回该对象。当传入一个简单的数据类型传的是值，所以不会影响原来的值： 希望对大家有帮助，喜欢我的话，可以关注我！！谢谢！！！
2018-02-06 12:10:19
307
1
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人