js

JS Code block 代码块–图片压缩

星期一, 四月 17th, 2023 | computer, 前端 | 没有评论

图片压缩

/**
 * 图片压缩
 * @param  {string}   file [压缩文件]
 * @param  {object}   obj [压缩参数]
 * @param  {function} cb   [回调函数]
 * @return {string}        [返回压缩前和压缩后的格式]
 */
/* istanbul ignore next */
function photoCompress(file, obj, cb) {
// obj = {
//    width: 图片宽,
//    height: 图片高,
//    quality: 图像质量,
//    blob: 是否转换成Blob
//  }
  // 将以base64的图片url数据转换为Blob
  function convertBase64UrlToBlob(urlData) {
    let arr = urlData.split(',');
    let mime = arr[0].match(/:(.*?);/)[1];
    let bstr = atob(arr[1]);
    let n = bstr.length, u8arr = new Uint8Array(n);
    while (n--) {
      u8arr[n] = bstr.charCodeAt(n);
    }
    return new Blob([u8arr], {type: mime});
  }
 
  // canvas 绘制图片
  function canvasDataURL(oldBase64) {
    let img = new Image();
    img.src = oldBase64;
    img.onload = function () {
      let that = this;
      // 默认按比例压缩
      let w = that.width,
        h = that.height,
        scale = w / h;
      w = obj.width || w;
      h = obj.height || (w / scale);
      let quality = 0.7;  // 默认图片质量为0.7
      //生成canvas
      let canvas = document.createElement('canvas');
      let ctx = canvas.getContext('2d');
      // 创建属性节点
      let anw = document.createAttribute('width');
      anw.nodeValue = w;
      let anh = document.createAttribute('height');
      anh.nodeValue = h;
      canvas.setAttributeNode(anw);
      canvas.setAttributeNode(anh);
      ctx.drawImage(that, 0, 0, w, h);
      // 图像质量
      if (obj.quality && obj.quality <= 1 && obj.quality > 0) {
        quality = obj.quality;
      }
      // quality值越小,所绘制出的图像越模糊
      let base64 = canvas.toDataURL('image/jpeg', quality);
      // 回调函数返回base64的值
      if (obj.blob) {
        cb && cb(convertBase64UrlToBlob(base64), convertBase64UrlToBlob(oldBase64))
      } else {
        cb && cb(base64, oldBase64);
      }
    }
  }
 
  // 读取图片的base64格式
  let ready = new FileReader();
  ready.readAsDataURL(file);
  ready.onload = function () {
    let re = this.result;
    canvasDataURL(re)
  }
}

Tags:

JS Code block 代码块–String 字符串

星期一, 四月 17th, 2023 | computer, 前端 | 没有评论

String 字符串
去除空格
字符大小写转换
翻转字符
下划线格式字符串转为驼峰格式
驼峰格式字符串转为下划线格式
转义html(防XSS攻击)
› Continue reading

Tags:

JS Code block 代码块–日期

星期一, 四月 17th, 2023 | computer, 前端 | 没有评论

日期
按类型格式化日期
设置几天后的日期
获取当前时间的n天后的时间戳
本周第一天
本周最后一天
本月第一天
本月最后一天
日期转时间戳
返回指定时间戳之间的时间间隔
星期转换,将数字转换成英文
月份转换,将数字转换成英文
是否为闰年
返回两个年份之间的闰年
› Continue reading

Tags:

JS Code block 代码块–图片

星期一, 四月 17th, 2023 | computer, 前端 | 没有评论

图片
图片下载
图片转成base64
canvas标签转换成img标签
Base64转Blob对象
创建一个canvas,并获取 CanvasRenderingContext2D
内容以文件形式下载下来
浏览器是否支持webP格式图片
› Continue reading

Tags:

JS Code block 代码块–regex 正则表达式

星期一, 四月 17th, 2023 | computer, 前端 | 没有评论

regex 正则表达式
是否由 26 个英文字母组成的字符串
是否由 26 个英文字母的大写组成的字符串
是否由 26 个英文字母的小写组成的字符串
是否为数字
是否为中文
是否为手机号
是否电子邮件
是否为座机号
是否为身份证
密码验证
邮政编码
是否为qq号
是否为金额
是否为Url
是否为ip
严格的身份证校验
移除标签
是否为 HTML 标签
检查是否为特殊字符
是否为有效的统一社会信用代码
是否为有效的A股代码
是否为有效的银行卡号
是否为有效的 base64格式
是否为有效的ed2k链接
是否为有效的IP v4
是否为有效的IP v6
是否为有效的md5格式(32位)
是否为有效的护照
是否为有效的子网掩码
› Continue reading

Tags:

JS Code block 代码块–数组(array)

星期一, 四月 17th, 2023 | computer, 前端 | 没有评论

数组(array)
判断一个元素是否在数组中
数组进行去重
数组合并
将类数组转换为数组
获取数组中最大值
获取数组中最小值
计算某值在数组中出现的次数
去除数组中假值元素
获取数组的最后一项
› Continue reading

Tags:

JS Code block 代码块–数字

星期一, 四月 17th, 2023 | computer, 前端 | 没有评论

数字
数字位数前面补0
角度转换为弧度
弧度转换为角度
生成随机数
阿拉伯数字翻译成中文的数字
将数字转换为大写金额
生成唯一值uuid
字节大小
千分数值格式
加法函数,用来得到精确的加法结果
除法函数,用来得到精确的除法结果
乘法函数,用来得到精确的乘法结果
减法函数,用来得到精确的减法结果
› Continue reading

Tags:

JS Code block 代码块–横向滚动翻页

星期一, 四月 17th, 2023 | computer, 前端 | 没有评论

横向滚动翻页
横向滚动插件,是一个有横向翻页按钮,同时翻页时有滚动效果的插件。在公司官网展示不是很多东西情况下会经常用到。

demo
可以在本地下载这个项目: https://github.com/PhilipsYuan/horizontal-roll-pagination, 然后在 本地跑下demo.html 文件

使用说明
你需要引入horizontal-roll-pagination.js, 引入之后会在全局window下有个属性HorizontalRollPagination,你可以new 它创建实例。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
let config = {
        // preDom: 前一页的按钮节点 -- 必须
        preDom: document.getElementsByClassName('prev')[0],
        // nextDom: 后一页的按钮节点 -- 必须
        nextDom: document.getElementsByClassName('next')[0],
        // box: 可视区域的节点 -- 必须
        box: document.getElementsByClassName('box')[0],
        // scrollDom: 会被移动的节点 -- 必须
        scrollDom: document.getElementsByClassName('scroll_list')[0],
        // parentDom: 展示项的父节点 -- 必须
        parentDom: document.getElementsByTagName('ul')[0],
        // 是否循环
        loop: true
    };
    let horizontalRollPagination = new HorizontalRollPagination(config);
    horizontalRollPagination.init();

这个插件对dom节点需要一定要求。它的结构如下:
› Continue reading

Tags:

JS Code block 代码块–环境判断

星期一, 四月 17th, 2023 | computer, 前端 | 没有评论

环境判断
判断是否在微信环境
是否安卓环境
是否iphone环境
是否ios环境(包括iPhone和ipad)
是否safari环境
是否为windows系统
是否为mac系统(包含iphone手机)
是否是支付宝内核
是否是QQ浏览器内核
是否是UC浏览器内核
是否是微博内核
获取浏览器的类型
获取设备像素比
判断 iPhone X Series 机型,刘海屏
› Continue reading

Tags:

js货jsp检测是否是手机等移动端访问

星期一, 七月 29th, 2013 | JAVA-and-J2EE, pagemaker | 一条评论

其他的就不多说了,直接上代码了,
JSP 版本

String ua=request.getHeader("User-Agent").toLowerCase();
if(ua.matches("(?i).*((android|bb\\d+|meego).+mobile|avantgo|bada\\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\\.(browser|link)|vodafone|wap|windows (ce|phone)|xda|xiino).*")||ua.substring(0,4).matches("(?i)1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\\-(n|u)|c55\\/|capi|ccwa|cdm\\-|cell|chtm|cldc|cmd\\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\\-s|devi|dica|dmob|do(c|p)o|ds(12|\\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\\-|_)|g1 u|g560|gene|gf\\-5|g\\-mo|go(\\.w|od)|gr(ad|un)|haie|hcit|hd\\-(m|p|t)|hei\\-|hi(pt|ta)|hp( i|ip)|hs\\-c|ht(c(\\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\\-(20|go|ma)|i230|iac( |\\-|\\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\\/)|klon|kpt |kwc\\-|kyo(c|k)|le(no|xi)|lg( g|\\/(k|l|u)|50|54|\\-[a-w])|libw|lynx|m1\\-w|m3ga|m50\\/|ma(te|ui|xo)|mc(01|21|ca)|m\\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\\-2|po(ck|rt|se)|prox|psio|pt\\-g|qa\\-a|qc(07|12|21|32|60|\\-[2-7]|i\\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\\-|oo|p\\-)|sdk\\/|se(c(\\-|0|1)|47|mc|nd|ri)|sgh\\-|shar|sie(\\-|m)|sk\\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\\-|v\\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\\-|tdg\\-|tel(i|m)|tim\\-|t\\-mo|to(pl|sh)|ts(70|m\\-|m3|m5)|tx\\-9|up(\\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\\-|your|zeto|zte\\-")) {
  response.sendRedirect("http://detectmobilebrowser.com/mobile");
  return;
}

JS版本:

(function(a,b){if(/(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows (ce|phone)|xda|xiino/i.test(a)||/1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i.test(a.substr(0,4)))window.location=b})(navigator.userAgent||navigator.vendor||window.opera,'http://detectmobilebrowser.com/mobile');

更多不同语言的版本配置见开源的库: Detect Mobile Browsers | Open source mobile phone detection

Tags: , , ,

Search

文章分类

Links

Meta