JavaScript有用的代码片段和trick

平时工作过程中可以用到的实用代码集棉。

判断对象否为空

export const isEmpty = obj => {
    return Object.keys(obj).length === 0
}

浮点数取整

const x = 123.4545;
x >> 0; // 123
~~x; // 123
x | 0; // 123
Math.floor(x); // 123

注意：前三种方法只适用于32个位整数，对于负数的处理上和Math.floor是不同的。

Math.floor(-12.53); // -13
-12.53 | 0; // -12

生成6位数字验证码

// 方法一
('000000' + Math.floor(Math.random() *  999999)).slice(-6);

// 方法二
Math.random().toString().slice(-6);

// 方法三
Math.random().toFixed(6).slice(-6);

// 方法四
'' + Math.floor(Math.random() * 999999);

16进制颜色代码生成

(function() {
  return '#'+('00000'+
    (Math.random()*0x1000000<<0).toString(16)).slice(-6);
})();

驼峰命名转下划线

'componentMapModelRegistry'.match(/^[a-z][a-z0-9]+|[A-Z][a-z0-9]*/g).join('_').toLowerCase(); // component_map_model_registry

url查询参数转json格式

// ES6
const query = (search = '') => ((querystring = '') => (q => (querystring.split('&').forEach(item => (kv => kv[0] && (q[kv[0]] = kv[1]))(item.split('='))), q))({}))(search.split('?')[1]);

// 对应ES5实现
var query = function(search) {
  if (search === void 0) { search = ''; }
  return (function(querystring) {
    if (querystring === void 0) { querystring = ''; }
    return (function(q) {
      return (querystring.split('&').forEach(function(item) {
        return (function(kv) {
          return kv[0] && (q[kv[0]] = kv[1]);
        })(item.split('='));
      }), q);
    })({});
  })(search.split('?')[1]);
};

query('?key1=value1&key2=value2'); // es6.html:14 {key1: "value1", key2: "value2"}

获取URL参数

function getQueryString(key){
  var reg = new RegExp("(^|&)"+ key +"=([^&]*)(&|$)");
  var r = window.location.search.substr(1).match(reg);
  if(r!=null){
      return  unescape(r[2]);
  }
  return null;
}

n维数组展开成一维数组

var foo = [1, [2, 3], ['4', 5, ['6',7,[8]]], [9], 10];

// 方法一
// 限制：数组项不能出现`,`，同时数组项全部变成了字符数字
foo.toString().split(','); // ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10"]

// 方法二
// 转换后数组项全部变成数字了
eval('[' + foo + ']'); // [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]

// 方法三，使用ES6展开操作符
// 写法太过麻烦，太过死板
[1, ...[2, 3], ...['4', 5, ...['6',7,...[8]]], ...[9], 10]; // [1, 2, 3, "4", 5, "6", 7, 8, 9, 10]

// 方法四
JSON.parse(`[${JSON.stringify(foo).replace(/\[|]/g, '')}]`); // [1, 2, 3, "4", 5, "6", 7, 8, 9, 10]

// 方法五
const flatten = (ary) => ary.reduce((a, b) => a.concat(Array.isArray(b) ? flatten(b) : b), []);
flatten(foo); // [1, 2, 3, "4", 5, "6", 7, 8, 9, 10]

// 方法六
function flatten(a) {
  return Array.isArray(a) ? [].concat(...a.map(flatten)) : a;
}
flatten(foo); // [1, 2, 3, "4", 5, "6", 7, 8, 9, 10]

// 方法七
var flatten = function(arr) {
  var result = [];
  var flat = function* (a) {
    var length = a.length;
    for (var i = 0; i < length; i++) {
      var item = a[i];
      if (typeof item !== 'number') {
        yield * flat(item);
      } else {
        yield item;
      }
    }
  }

  for (var f of flat(arr)) {
    result.push(f);
  }

  return result;
}

注：更多方法请参考《How to flatten nested array in JavaScript?》

日期格式化

// 方法一
function format1(x, y) {
  var z = {
    y: x.getFullYear(),
    M: x.getMonth() + 1,
    d: x.getDate(),
    h: x.getHours(),
    m: x.getMinutes(),
    s: x.getSeconds()
  };
  return y.replace(/(y+|M+|d+|h+|m+|s+)/g, function(v) {
    return ((v.length > 1 ? "0" : "") + eval('z.' + v.slice(-1))).slice(-(v.length > 2 ? v.length : 2))
  });
}

format1(new Date(), 'yy-M-d h:m:s'); // 17-10-14 22:14:41

// 方法二
Date.prototype.format = function (fmt) { 
  var o = {
    "M+": this.getMonth() + 1, //月份 
    "d+": this.getDate(), //日 
    "h+": this.getHours(), //小时 
    "m+": this.getMinutes(), //分 
    "s+": this.getSeconds(), //秒 
    "q+": Math.floor((this.getMonth() + 3) / 3), //季度 
    "S": this.getMilliseconds() //毫秒 
  };
  if (/(y+)/.test(fmt)){
    fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
  } 
  for (var k in o){
    if (new RegExp("(" + k + ")").test(fmt)){
      fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
    }
  }     
  return fmt;
}

new Date().format('yy-M-d h:m:s'); // 17-10-14 22:18:17

计算相对时间

/**
 * 计算相对时间
 * @param {number} stamp 时间缀
 */
export const timeAgo = (stamp) => {
    const minute = 1000 * 60
    const hour = minute * 60
    const day = hour * 24
    const week = day * 7
    const month = day * 30
    const now = new Date().getTime()
    const difftime = now - stamp

    if (difftime < 0) return
    const minuteDiff = difftime / minute
    const hourDiff = difftime / hour
    const dayDiff = difftime / day
    const weekDiff = difftime / week
    const monthDiff = difftime / month

    if (monthDiff >= 1 && monthDiff < 3) {
        return `${parseInt(monthDiff)}月前`
    } else if (weekDiff >= 1 && weekDiff < 4) {
        return `${parseInt(weekDiff)}周前`
    } else if (dayDiff >= 1 && dayDiff < 6) {
        return `${parseInt(dayDiff)}天前`
    } else if (hourDiff >= 1 && hourDiff < 24) {
        return `${parseInt(hourDiff)}小时前`
    } else if (minuteDiff >= 1 && minuteDiff < 59) {
        return `${parseInt(minuteDiff)}分钟前`
    } else if (difftime >= 0 && difftime <= minute) {
        return '刚刚'
    }
}

简单深拷贝

/**
 * 符合JSON规范数据的深拷贝，日期格式要求为 `xxxx-xx-xx xx:xx:xx`
 * @param obj 数据源
 * @returns {any}
 */
export const clone = (obj) => {
    const regExp = /^\d{4}-\d{2}-\d{2}T\d{2}:\d{2}\d{2}\.\d{3}Z$/
    return JSON.parse(JSON.stringify(obj), function (k, v) {
        if (typeof v === 'string' && regExp.test(v)) {
            return new Date(v)
        }
        return v
    })
}

延迟执行 Promise

/**
 * 异步延迟执行
 * @param t 时间毫秒数
 * @param v 执行函数
 * @returns {Promise}
 */
export const delay = (t, v) => {
    return new Promise(function (resolve) {
        setTimeout(resolve.bind(null, v), t)
    })
}

统计文字个数

function wordCount(data) {
  var pattern = /[a-zA-Z0-9_\u0392-\u03c9]+|[\u4E00-\u9FFF\u3400-\u4dbf\uf900-\ufaff\u3040-\u309f\uac00-\ud7af]+/g;
  var m = data.match(pattern);
  var count = 0;
  if( m === null ) return count;
  for (var i = 0; i < m.length; i++) {
    if (m[i].charCodeAt(0) >= 0x4E00) {
      count += m[i].length;
    } else {
      count += 1;
    }
  }
  return count;
}

var text = '贷款买房，也意味着你能给自己的资产加杠杆，能够撬动更多的钱，来孳生更多的财务性收入。';
wordCount(text); // 38

特殊字符转义

function htmlspecialchars (str) {
  var str = str.toString().replace(/&/g, "&").replace(//g, ">").replace(/"/g, '"');
  return str;
}

htmlspecialchars('&jfkds<>'); // "&jfkds<>"

动态插入js

function injectScript(src) {
    var s, t;
    s = document.createElement('script');
    s.type = 'text/javascript';
    s.async = true;
    s.src = src;
    t = document.getElementsByTagName('script')[0];
    t.parentNode.insertBefore(s, t);
}

格式化数量

// 方法一
function formatNum (num, n) {
  if (typeof num == "number") {
    num = String(num.toFixed(n || 0));
    var re = /(-?\d+)(\d{3})/;
    while (re.test(num)) num = num.replace(re, "$1,$2");
    return num;
  }
  return num;
}

formatNum(2313123, 3); // "2,313,123.000"

// 方法二
'2313123'.replace(/\B(?=(\d{3})+(?!\d))/g, ','); // "2,313,123"

// 方法三
function formatNum(str) {
  return str.split('').reverse().reduce((prev, next, index) => {
    return ((index % 3) ? next : (next + ',')) + prev
  });
}

formatNum('2313323'); // "2,313,323"

身份证验证

function chechCHNCardId(sNo) {
  if (!this.regExpTest(sNo, /^[0-9]{17}[X0-9]$/)) {
    return false;
  }
  sNo = sNo.toString();

  var a, b, c;
  a = parseInt(sNo.substr(0, 1)) * 7 + parseInt(sNo.substr(1, 1)) * 9 + parseInt(sNo.substr(2, 1)) * 10;
  a = a + parseInt(sNo.substr(3, 1)) * 5 + parseInt(sNo.substr(4, 1)) * 8 + parseInt(sNo.substr(5, 1)) * 4;
  a = a + parseInt(sNo.substr(6, 1)) * 2 + parseInt(sNo.substr(7, 1)) * 1 + parseInt(sNo.substr(8, 1)) * 6;
  a = a + parseInt(sNo.substr(9, 1)) * 3 + parseInt(sNo.substr(10, 1)) * 7 + parseInt(sNo.substr(11, 1)) * 9;
  a = a + parseInt(sNo.substr(12, 1)) * 10 + parseInt(sNo.substr(13, 1)) * 5 + parseInt(sNo.substr(14, 1)) * 8;
  a = a + parseInt(sNo.substr(15, 1)) * 4 + parseInt(sNo.substr(16, 1)) * 2;
  b = a % 11;

  if (b == 2) {
    c = sNo.substr(17, 1).toUpperCase();
  } else {
    c = parseInt(sNo.substr(17, 1));
  }

  switch (b) {
    case 0:
      if (c != 1) {
        return false;
      }
      break;
    case 1:
      if (c != 0) {
        return false;
      }
      break;
    case 2:
      if (c != "X") {
        return false;
      }
      break;
    case 3:
      if (c != 9) {
        return false;
      }
      break;
    case 4:
      if (c != 8) {
        return false;
      }
      break;
    case 5:
      if (c != 7) {
        return false;
      }
      break;
    case 6:
      if (c != 6) {
        return false;
      }
      break;
    case 7:
      if (c != 5) {
        return false;
      }
      break;
    case 8:
      if (c != 4) {
        return false;
      }
      break;
    case 9:
      if (c != 3) {
        return false;
      }
      break;
    case 10:
      if (c != 2) {
        return false;
      };
  }
  return true;
}

测试质数

function isPrime(n) {
  return !(/^.?$|^(..+?)\1+$/).test('1'.repeat(n))
}

统计字符串中相同字符出现的次数

var arr = 'abcdaabc';

var info = arr
    .split('')
    .reduce((p, k) => (p[k]++ || (p[k] = 1), p), {});

console.log(info); //{ a: 3, b: 2, c: 2, d: 1 }

使用void 0来解决undefined被污染问题

undefined = 1;
!!undefined; // true
!!void(0); // false

单行写一个评级组件

"★★★★★☆☆☆☆☆".slice(5 - rate, 10 - rate); 

JavaScript 错误处理的方式的正确姿势

try {
    something
} catch (e) {
    window.location.href =
        "http://stackoverflow.com/search?q=[js]+" +
        e.message;
}

匿名函数自执行写法

( function() {}() );
( function() {} )();
[ function() {}() ];

~ function() {}();
! function() {}();
+ function() {}();
- function() {}();

delete function() {}();
typeof function() {}();
void function() {}();
new function() {}();
new function() {};

var f = function() {}();

1, function() {}();
1 ^ function() {}();
1 > function() {}();

两个整数交换数值

var a = 20, b = 30;
a ^= b;
b ^= a;
a ^= b;

a; // 30
b; // 20

数字字符转数字

var a = '1';
+a; // 1

最短的代码实现数组去重

[...new Set([1, "1", 2, 1, 1, 3])]; // [1, "1", 2, 3]

用最短的代码实现一个长度为m(6)且值都n(8)的数组

Array(6).fill(8); // [8, 8, 8, 8, 8, 8]

将argruments对象转换成数组

var argArray = Array.prototype.slice.call(arguments);

// ES6：
var argArray = Array.from(arguments)

// or
var argArray = [...arguments];

获取日期时间缀

// 获取指定时间的时间缀
new Date().getTime();
(new Date()).getTime();
(new Date).getTime();
// 获取当前的时间缀
Date.now();
// 日期显示转换为数字
+new Date();

使用~x.indexOf('y')来简化x.indexOf('y') > -1

var str = 'hello world';
if (str.indexOf('lo') > -1) {
  // ...
}

if (~str.indexOf('lo')) {
  // ...
}

parseInt() or Number()

两者的差别之处在于解析和转换两者之间的理解。

解析允许字符串中含有非数字字符，解析按从左到右的顺序，如果遇到非数字字符就停止。而转换不允许出现非数字字符，否者会失败并返回NaN。

var a = '520';
var b = '520px';

Number(a); // 520
parseInt(a); // 520

Number(b); // NaN
parseInt(b); // 520

parseInt方法第二个参数用于指定转换的基数，ES5默认为10进制。

parseInt('10', 2); // 2
parseInt('10', 8); // 8
parseInt('10', 10); // 10
parseInt('10', 16);  // 16

对于网上parseInt(0.0000008)的结果为什么为8，原因在于0.0000008转换成字符为"8e-7"，然后根据parseInt的解析规则自然得到"8"这个结果。

+拼接操作，+x or String(x)？

+运算符可用于数字加法，同时也可以用于字符串拼接。如果+的其中一个操作符是字符串(或者通过 隐式强制转换可以得到字符串)，则执行字符串拼接；否者执行数字加法。

需要注意的时对于数组而言，不能通过valueOf()方法得到简单基本类型值，于是转而调用toString()方法。

[1,2] + [3, 4]; // "1,23,4"

对于对象同样会先调用valueOf()方法，然后通过toString()方法返回对象的字符串表示。

var a = {};
a + 123; // "[object Object]123"

对于a + ""隐式转换和String(a)显示转换有一个细微的差别：a + ''会对a调用valueOf()方法，而String()直接调用toString()方法。大多数情况下我们不会考虑这个问题，除非真遇到。

var a  = {
  valueOf: function() { return 42; },
  toString: function() { return 4; }
}

a + ''; // 42
String(a); // 4

判断对象的实例

// 方法一: ES3
function Person(name, age) {
  if (!(this instanceof Person)) {
    return new Person(name, age);
  }
  this.name = name;
  this.age = age;
}

// 方法二: ES5
function Person(name, age) {
  var self = this instanceof Person ? this : Object.create(Person.prototype);
  self.name = name;
  self.age = age;

  return self;
}

// 方法三：ES6
function Person(name, age) {
  if (!new.target) {
    throw 'Peron must called with new';
  }
  this.name = name;
  this.age = age;
}

数据安全类型检查

// 对象
function isObject(value) {
  return Object.prototype.toString.call(value).slice(8, -1) === 'Object'';
}

// 数组
function isArray(value) {
  return Object.prototype.toString.call(value).slice(8, -1) === 'Array';
}

// 函数
function isFunction(value) {
  return Object.prototype.toString.call(value).slice(8, -1) === 'Function';
}

让数字的字面值看起来像对象

2.toString(); // Uncaught SyntaxError: Invalid or unexpected token

2..toString(); // 第二个点号可以正常解析
2 .toString(); // 注意点号前面的空格
(2).toString(); // 2先被计算

对象可计算属性名(仅在ES6中)

var suffix = ' name';
var person = {
  ['first' + suffix]: 'Nicholas',
  ['last' + suffix]: 'Zakas'
}

person['first name']; // "Nicholas"
person['last name']; // "Zakas"

数字四舍五入

// v: 值，p: 精度
function (v, p) {
  p = Math.pow(10, p >>> 31 ? 0 : p | 0)
  v *= p;
  return (v + 0.5 + (v >> 31) | 0) / p
}

round(123.45353, 2); // 123.45

在浏览器中根据url下载文件

function download(url) {
  var isChrome = navigator.userAgent.toLowerCase().indexOf('chrome') > -1;
  var isSafari = navigator.userAgent.toLowerCase().indexOf('safari') > -1;

  if (isChrome || isSafari) {
    var link = document.createElement('a');
    link.href = url;

    if (link.download !== undefined) {
      var fileName = url.substring(url.lastIndexOf('/') + 1, url.length);
      link.download = fileName;
    }

    if (document.createEvent) {
      var e = document.createEvent('MouseEvents');
      e.initEvent('click', true, true);
      link.dispatchEvent(e);
      return true;
    }
  }

  if (url.indexOf('?') === -1) {
    url += '?download';
  }

  window.open(url, '_self');
  return true;
}

快速生成UUID

function uuid() {
  var d = new Date().getTime();
  var uuid = 'xxxxxxxxxxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
    var r = (d + Math.random() * 16) % 16 | 0;
    d = Math.floor(d / 16);
    return (c == 'x' ? r : (r & 0x3 | 0x8)).toString(16);
  });
  return uuid;
};

uuid(); // "33f7f26656cb-499b-b73e-89a921a59ba6"

JavaScript浮点数精度问题

function isEqual(n1, n2, epsilon) {
  epsilon = epsilon == undefined ? 10 : epsilon; // 默认精度为10
  return n1.toFixed(epsilon) === n2.toFixed(epsilon);
}

0.1 + 0.2; // 0.30000000000000004
isEqual(0.1 + 0.2, 0.3); // true

0.7 + 0.1 + 99.1 + 0.1; // 99.99999999999999
isEqual(0.7 + 0.1 + 99.1 + 0.1, 100); // true

格式化表单数据

function formatParam(obj) {
  var query = '', name, value, fullSubName, subName, subValue, innerObj, i;

  for(name in obj) {
    value = obj[name];

    if(value instanceof Array) {
      for(i=0; i

创建指定长度非空数组

在JavaScript中可以通过new Array(3)的形式创建一个长度为3的空数组。在老的Chrome中其值为[undefined x 3]，在最新的Chrome中为[empty x 3]，即空单元数组。在老Chrome中，相当于显示使用[undefined, undefined, undefined]的方式创建长度为3的数组。

但是，两者在调用map()方法的结果是明显不同的

var a = new Array(3);
var b = [undefined, undefined, undefined];

a.map((v, i) => i); // [empty × 3]
b.map((v, i) => i); // [0, 1, 2]

多数情况我们期望创建的是包含undefined值的指定长度的空数组，可以通过下面这种方法来达到目的：

var a = Array.apply(null, { length: 3 });

a; // [undefined, undefined, undefined]
a.map((v, i) => i); // [0, 1, 2]

总之，尽量不要创建和使用空单元数组。

debounce方法

debounce()方法用来延迟执行函数。

var debounce = function (func, threshold, execAsap) {
  var timeout;

  return function debounced() {
    var obj = this, args = arguments;
    function delayed() {
      if (!execAsap)
        func.apply(obj, args);
      timeout = null;
    };

    if (timeout)
      clearTimeout(timeout);
    else if (execAsap)
      func.apply(obj, args);

    timeout = setTimeout(delayed, threshold || 100);
  };
}

判断客户端

var browser = {
    v: (function() {
        var u = navigator.userAgent,
            app = navigator.appVersion,
            p = navigator.platform;
        return {
            trident: u.indexOf('Trident') > -1, //IE内核
            presto: u.indexOf('Presto') > -1, //opera内核
            webKit: u.indexOf('AppleWebKit') > -1, //苹果、谷歌内核
            gecko: u.indexOf('Gecko') > -1 && u.indexOf('KHTML') == -1, //火狐内核
            mobile: !!u.match(/AppleWebKit.*Mobile.*/), //是否为移动终端
            ios: !!u.match(/i[^;]+;( U;)? CPU.+Mac OS X/), //ios终端
            android: u.indexOf('Android') > -1 || u.indexOf('Linux') > -1, //android终端或uc浏览器
            iPhone: u.indexOf('iPhone') > -1, //是否为iPhone或者QQHD浏览器
            iPad: u.indexOf('iPad') > -1, //是否iPad
            weixin: u.indexOf('MicroMessenger') > -1, //是否微信
            webApp: u.indexOf('Safari') == -1, //是否web应该程序，没有头部与底部
            UCB: u.match(/UCBrowser/i) == "UCBrowser",
            QQB: u.match(/MQQBrowser/i) == "MQQBrowser",
            win: p.indexOf('Win') > -1, //判断是否是WIN操作系统
            mac: p.indexOf('Mac') > -1 //判断是否是Mac操作系统
        };
    })()
}

计算输入字符数并且区分中英文

英文、数字包括英文符号占一个长度，中文和中文标点符号占二个长度，这里也只处理常见的中文符号。

// 判断是否为中文
export const isChinese = ch => {
  const HAN_REGEX = /[\u2E80-\u2E99\u2E9B-\u2EF3\u2F00-\u2FD5\u3005\u3007\u3021-\u3029\u3038-\u303B\u3400-\u4DB5\u4E00-\u9FD5\uF900-\uFA6D\uFA70-\uFAD9]/;
  return !!ch.match(HAN_REGEX);
};

// 判断是否为常见中文符号
export const isChinesePunctuation = ch => {
  // 中文标点符号 ·！￥……（）——【】？、，。《》；：‘’“”「」
  const HAN_PUNCTUATION_REGEX = /[\u0026\u0023\u0031\u0038\u0033\u003b\uff01\uffe5\u2026\u2026\uff08\uff09\u2014\u2014\u3010\u3011\uff1f\u3001\uff0c\u3002\u300a\u300b\uff1b\uff1a\u2018\u2019\u201c\u201d\u300c\u300d]/;
  return !!ch.match(HAN_PUNCTUATION_REGEX);
};

// 判断是否英文字母，包含数字
export const isEnglish = ch => {
  const code = ch.codePointAt(0);
  return (code > 64 && code < 91) || (code > 96 && code < 123) || (code > 48 && code < 58);
}

// 统计字符串的长度，中文占二个字节，英文占一个字节
export const getChCount = str => {
  const trimmedStr = str.trim();
  let count = 0;

  for (let i = 0; i < trimmedStr.length; i++) {
    // 先判断英文，实测发现中文符号在编码上解析出来的有可能和英文一样，导致统计错误
    if (isEnglish(trimmedStr[i])) {
      count += 1;
    } else if (isChinese(trimmedStr[i]) || isChinesePunctuation(trimmedStr[i])) {
      count += 2;
    } else {
      count += 1;
    }
  }

  return count;
}

注意：上面并没有完整的测试，使用时请多测试一下，及时反馈。

根据字节显示大小

/**
 * 解析字节，例如：
 * 1000000 bytes -> { size: 976.6, unit: 'kB' }
 *
 * @param bytes 字节大小
 * @returns {{size: number, unit: (string|string|string|string|string|string|string|string)}}
 */
export const parseBytes = (bytes: number): { size: number, unit: string } => {
  let i = -1;
  const byteUnits = [ 'kB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB' ];

  do {
    bytes = bytes / 1024;
    i++;
  } while (bytes > 1024);

  return {
    size: parseFloat(Math.max(bytes, 0.1).toFixed(1)),
    unit: byteUnits[ i ]
  };
};

将字符串解析成DOM

var xmlString = "
Link
"
  , parser = new DOMParser()
  , doc = parser.parseFromString(xmlString, "text/xml");
doc.firstChild // => 
...
doc.firstChild.firstChild // => ...

图片URL转base64

/**
 * 图片地址转 Base64
 * @param {String} url 图片地址
 */
function convertUrlToBase64(url) {
  return new Promise(function(resolve, reject) {
    const img = new Image()
    img.crossOrigin = 'Anonymous'
    img.src = url
    img.onload = function() {
      const canvas = document.createElement('canvas')
      canvas.width = img.width
      canvas.height = img.height
      const ctx = canvas.getContext('2d')
      ctx.drawImage(img, 0, 0, img.width, img.height)
      const ext = img.src.substring(img.src.lastIndexOf('.') + 1).toLowerCase()
      const dataURL = canvas.toDataURL('image/' + ext)
      const base64 = {
        dataURL: dataURL,
        type: 'image/' + ext,
        ext: ext
      }
      resolve(base64)
    }
  })
}

Base64 转 Blob

/**
 * Base64 转 Blob
 * @param {String} base64 Base64源
 */
function convertBase64UrlToBlob(base64) {
  const parts = base64.dataURL.split(';base64,')
  const contentType = parts[0].split(':')[1]
  const raw = window.atob(parts[1])
  const rawLength = raw.length
  const uInt8Array = new Uint8Array(rawLength)
  for (let i = 0; i < rawLength; i++) {
    uInt8Array[i] = raw.charCodeAt(i)
  }
  return new Blob([uInt8Array], { type: contentType })
}

判断 URL

export function isUrl(path: string): boolean {
  let url
  try {
    url = new URL(path)
  }
  catch (_) {
    return false
  }
  return url.protocol === 'http:' || url.protocol === 'https:'
}