Skip to content

Instantly share code, notes, and snippets.

View zhiqiang21's full-sized avatar
🇨🇳
Happy

ZhiQiangHou zhiqiang21

🇨🇳
Happy
View GitHub Profile
@zhiqiang21
zhiqiang21 / gist:3686459d6d7e7246cb32f9b57e6dd54c
Created June 17, 2016 04:17
判断当前访问者的客户端设备类型、操作系统及浏览器类型
// 判断当前访问者的客户端设备类型、操作系统及浏览器类型
function jupmBrowserType() {
var browser = {
versions: function () {
var u = navigator.userAgent, app = navigator.appVersion;
return { // 客户端浏览器版本信息
trident: u.indexOf('Trident') > -1, // IE内核
webKit: u.indexOf('AppleWebKit') > -1, // 苹果、谷歌内核
mobile: !!u.match(/AppleWebKit.*Mobile.*/), // 是否为移动终端
android: u.indexOf('Android') > -1 || u.indexOf('Linux') > -1, // android终端或者uc浏览器
@zhiqiang21
zhiqiang21 / requestAnimationFrame.js
Created December 28, 2016 03:36
兼容各浏览器的requestAnimationFrame
var lastTime = 0;
var prefixes = 'webkit moz ms o'.split(' '); //各浏览器前缀
var requestAnimationFrame = window.requestAnimationFrame;
var cancelAnimationFrame = window.cancelAnimationFrame;
var prefix;
//通过遍历各浏览器前缀,来得到requestAnimationFrame和cancelAnimationFrame在当前浏览器的实现形式
for( var i = 0; i < prefixes.length; i++ ) {
if ( requestAnimationFrame && cancelAnimationFrame ) {
@zhiqiang21
zhiqiang21 / harAnalyze.py
Created December 28, 2016 03:42
解析浏览器导出的har文件
#!/usr/bin/python
# -*- coding: UTF-8 -*-
import json
def readHarFile():
hostList = []
outputPath = ''
filePath = raw_input('输入文件路径+名字:')
@zhiqiang21
zhiqiang21 / 压缩图片上传.html
Last active February 2, 2021 08:37
javascript压缩图片然后上传
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">
<title>移动端图片压缩上传demo</title>
<style>
*{margin: 0;padding: 0;}
li{list-style-type: none;}
a,input{outline: none;-webkit-tap-highlight-color:rgba(0,0,0,0);}
@zhiqiang21
zhiqiang21 / 卸载pycharm系列.js
Created January 8, 2017 16:36
卸载Jetbrains系列
#!/usr/bin/env bash
set -x
# Clear Application Saved States JetBrains
rm -rfv ~/Library/Saved\ Application\ State/com.jetbrains.*
# PhpStorm
rm -fv /usr/local/bin/pstorm
rm -rfv ~/Library/Preferences/WebIde?0
rm -rfv ~/Library/Caches/WebIde?0
@zhiqiang21
zhiqiang21 / jsbeautify.js
Last active September 5, 2017 14:20
.jsbeautifyrc配置文件
{
// The plugin looks for a .jsbeautifyrc file in the same directory as the
// source file you're prettifying (or any directory above if it doesn't exist,
// or in your home folder if everything else fails) and uses those options
// along the default ones.
// Details: https://github.com/victorporof/Sublime-HTMLPrettify#using-your-own-jsbeautifyrc-options
// Documentation: https://github.com/einars/js-beautify/
"html": {
"allowed_file_extensions": ["htm", "html", "xhtml", "shtml", "xml", "svg"],
@zhiqiang21
zhiqiang21 / check_css3_property.js
Created March 8, 2017 07:03
js判断浏览器是否支持css3属性
/**
* 判断浏览器是否支持某一个CSS3属性
* @param {String} 属性名称
* @return {Boolean} true/false
* @version 1.0
*/
function supportCss3(style) {
var prefix = ['webkit', 'Moz', 'ms', 'o'],
i,
@zhiqiang21
zhiqiang21 / 移动端H5图片压缩上传.md
Created March 21, 2017 03:34
移动端h5图片压缩上传

移动端H5图片压缩上传

大体的思路是,部分API的兼容性请参照caniuse

  1. 利用FileReader,读取blob对象,或者是file对象,将图片转化为data uri的形式。
  2. 使用canvas,在页面上新建一个画布,利用canvas提供的API,将图片画入这个画布当中。
  3. 利用canvas.toDataURL(),进行图片的压缩,得到图片的data uri的值
  4. 上传文件。

步骤1当中,在进行图片压缩前,还是对图片大小做了判断的,如果图片大小大于200KB时,是直接进行图片上传,不进行图片的压缩,如果图片的大小是大于200KB,则是先进行图片的压缩再上传:

@zhiqiang21
zhiqiang21 / middleware.js
Created April 13, 2017 02:24
next 中间件模式的实现
function Middleware() {
this.cache = [];
this.options = null; // 缓存options
}
Middleware.prototype.use = function (fn) {
if (typeof fn !== 'function') {
throw 'middleware must be a function';
}
this.cache.push(fn);