// ==UserScript== // @name tank utils 通用js工具脚本 // @version 1.2.5 // @description 通用js工具脚本,各种常用的工具 // @author general // @match *://*/* // @grant none // @license MIT // @namespace http://overflow.cat/ // @downloadURL https://update.greasyfork.icu/scripts/476797/tank%20utils%20%E9%80%9A%E7%94%A8js%E5%B7%A5%E5%85%B7%E8%84%9A%E6%9C%AC.user.js // @updateURL https://update.greasyfork.icu/scripts/476797/tank%20utils%20%E9%80%9A%E7%94%A8js%E5%B7%A5%E5%85%B7%E8%84%9A%E6%9C%AC.meta.js // ==/UserScript== /******/ (() => { // webpackBootstrap /******/ "use strict"; /******/ // The require scope /******/ var __webpack_require__ = {}; /******/ /************************************************************************/ /******/ /* webpack/runtime/define property getters */ /******/ (() => { /******/ // define getter functions for harmony exports /******/ __webpack_require__.d = (exports, definition) => { /******/ for(var key in definition) { /******/ if(__webpack_require__.o(definition, key) && !__webpack_require__.o(exports, key)) { /******/ Object.defineProperty(exports, key, { enumerable: true, get: definition[key] }); /******/ } /******/ } /******/ }; /******/ })(); /******/ /******/ /* webpack/runtime/hasOwnProperty shorthand */ /******/ (() => { /******/ __webpack_require__.o = (obj, prop) => (Object.prototype.hasOwnProperty.call(obj, prop)) /******/ })(); /******/ /************************************************************************/ var __webpack_exports__ = {}; /* unused harmony export tankUtils */ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); } var ua = window.navigator.userAgent; var tankUtils = { checkIsPlainObject: checkIsPlainObject, checkIsValidDom: checkIsValidDom, commonSetDomStyle: commonSetDomStyle, commonSetDomAttributes: commonSetDomAttributes, createElement: createElement, base64ToBlob: base64ToBlob, removeDom: removeDom, domAddClassName: domAddClassName, domRemoveClassName: domRemoveClassName, domContainsClassName: domContainsClassName, checkIsMobilePhone: checkIsMobilePhone, checkIsAndroid: checkIsAndroid, checkIsIPhone: checkIsIPhone, convertImageToCanvas: convertImageToCanvas, convertCanvasToImage: convertCanvasToImage, commonSetDomListStyleCssText: commonSetDomListStyleCssText, findDom: findDom, findDomList: findDomList, isPC: !ua.includes('Android') && !ua.includes('iPhone'), isMobile: ua.includes('Android') || ua.includes('iPhone'), isAndroid: ua.includes('Android'), isIPhone: ua.includes('iPhone') }; if (typeof window !== 'undefined') { window.tankUtils = tankUtils; } /** * @description 检查是否有纯对象 * @param obj */ function checkIsPlainObject(obj) { return Object.prototype.toString.call(obj) === '[object Object]'; } /** * @description 判断是否有效 dom * @param dom */ function checkIsValidDom(dom) { if (!dom) { return false; } if (Array.isArray(dom)) { return dom; } if ((typeof HTMLElement === "undefined" ? "undefined" : _typeof(HTMLElement)) === 'object') { return dom instanceof HTMLElement; } return dom && _typeof(dom) === 'object' && dom.nodeType === 1 && typeof dom.nodeName === 'string'; } /** * @description 通用设置样式 * @param selector {string | HTMLElement} * @param style {Object} */ function commonSetDomStyle(selector) { var style = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {}; if (!selector) { return; } var dom = null; if (typeof selector === 'string') { dom = document.querySelector(selector); } else if (checkIsValidDom(selector)) { dom = selector; } if (!checkIsValidDom(dom)) { return; } Object.keys(style).forEach(function (key) { dom.style[key] = style[key]; }); } /** * @description 查找单个 dom * @param selector * @return {null} */ function findDom(selector) { if (!selector) { return null; } var dom = null; if (typeof selector === 'string') { dom = document.querySelector(selector); } else if (checkIsValidDom(selector)) { dom = selector; } if (!checkIsValidDom(dom)) { return null; } return dom; } /** * @description 查找 dom 列表 * @param selector * @return {unknown[]|*[]} */ function findDomList(selector) { if (!selector) { return []; } var dom = null; if (typeof selector === 'string') { dom = document.querySelectorAll(selector); } else if (checkIsValidDom(selector)) { dom = selector; } if (!checkIsValidDom(dom)) { return []; } return Array.from(dom); } /** * 通过 dom 设置样式 * @param selector * @param cssText */ function commonSetDomListStyleCssText(selector, cssText) { var domList = findDomList(selector); domList.forEach(function (domItem) { domItem.style.cssText = cssText; }); } /** * @description 通用设置属性 * @param dom {HTMLElement} * @param attributes {Object} */ function commonSetDomAttributes(dom) { var attributes = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {}; if (!dom) { return; } Object.keys(attributes).forEach(function (key) { dom[key] = attributes[key]; }); } /** * @description dom 添加类名 * @param dom * @param className */ function domAddClassName(dom, className) { if (checkIsValidDom(dom)) { dom.classList.add(className); } } /** * @description dom 删除类名 * @param dom * @param className */ function domRemoveClassName(dom, className) { if (checkIsValidDom(dom)) { dom.classList.remove(className); } } /** * @description 检查 dom 包含哪个类名 * @param dom * @param className */ function domContainsClassName(dom, className) { if (checkIsValidDom(dom)) { dom.classList.contains(className); } } /** * @description 创建 dom * @param elem {string} * @param attributes {Object} * @param style {Object} */ function createElement(elem) { var attributes = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {}; var style = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {}; if (!elem) { return null; } var dom = document.createElement(elem); if (checkIsPlainObject(attributes)) { commonSetDomAttributes(dom, attributes); } if (checkIsPlainObject(style)) { commonSetDomStyle(dom, style); } return dom; } /** * @description bae64转为图片 * @param urlData * @return {Blob} */ function base64ToBlob(urlData) { var arr = urlData.split(','); var mime = arr[0].match(/:(.*?);/)[1] || 'image/png'; // 去掉url的头,并转化为byte var bytes = window.atob(arr[1]); // 处理异常,将ascii码小于0的转换为大于0 var ab = new ArrayBuffer(bytes.length); // 生成视图(直接针对内存):8位无符号整数,长度1个字节 var ia = new Uint8Array(ab); for (var i = 0; i < bytes.length; i++) { ia[i] = bytes.charCodeAt(i); } return new Blob([ab], { type: mime }); } /** * @description 删除 dom * @param className */ function removeDom(className) { try { var childDoms = document.querySelectorAll(className.trim()); for (var i = 0; i < childDoms.length; i++) { var childDom = childDoms[i]; childDom.parentNode.removeChild(childDom); } } catch (e) { console.log('e', e); } } /** * @description 检查是否是手机 * @return {boolean} */ function checkIsMobilePhone() { return checkIsAndroid() || checkIsIPhone(); } /** * @description 检查是否是安卓手机 * @return {boolean} */ function checkIsAndroid() { return window.navigator.userAgent.includes('Android'); } /** * @description 检查是否是苹果手机 * @return {boolean} */ function checkIsIPhone() { return window.navigator.userAgent.includes('iPhone'); } /** * @description 图片转为canvas * @param image * @return {HTMLCanvasElement} */ function convertImageToCanvas(image) { // 创建canvas DOM元素,并设置其宽高和图片一样 var canvas = document.createElement('canvas'); canvas.width = image.width; canvas.height = image.height; // 坐标(0,0) 表示从此处开始绘制,相当于偏移。 var context = canvas.getContext('2d'); if (context) { context.drawImage(image, 0, 0); } return canvas; } /** * @description 从 canvas 提取图片 image * @param canvas {HTMLCanvasElement} * @return {HTMLImageElement} */ function convertCanvasToImage(canvas) { //新Image对象,可以理解为DOM var image = new Image(); // canvas.toDataURL 返回的是一串Base64编码的URL,当然,浏览器自己肯定支持 // 指定格式 PNG image.src = canvas.toDataURL('image/png'); return image; } /******/ })() ;