js
关注
分享
扫一扫
jarisMA
这个作者很懒，什么都没留下…
展开
-
jspdf & html2canvas 导出pdf（所见即所得）
jspdf & html2canvas 导出pdf（所见即所得）引入html2canvasimport html2canvas from "html2canvas";引入jsPDFimport jsPDF from "jspdf";分不同状况使用，如下：一、完全不分页const container = 要导出的div;// 将html转为canvashtml2canvas(container, { allowTaint: true, useCORS: true, //原创 2021-10-27 16:44:34 · 1113 阅读 · 2 评论 -
js实现颜色转换
js实现颜色转换一、hex转rgba const hex2Rgba = (bgColor, alpha = 1) => { let color = bgColor.slice(1); // 去掉'#'号 let rgba = [ parseInt("0x" + color.slice(0, 2)), parseInt("0x" + color.slice(2, 4)), parseInt("0x" + color.slice(4, 6)), alpha原创 2021-03-05 11:17:57 · 1937 阅读 · 0 评论 -
原生js监听dom元素大小变化
原生js监听dom元素大小变化参考ResizeObserver这里是引用ResizeObserver avoids infinite callback loops and cyclic dependencies that are often created when resizing via a callback function. It does this by only processing elements deeper in the DOM in subsequent frames. Imp原创 2021-03-03 10:11:00 · 861 阅读 · 0 评论 -
js 获取数组的深度
js 获取数组的深度通过递归的方法getDepth(arr, depth) { var flag = false; var temp = []; for (let i = 0; i < arr.length; i++) { if (arr[i].children instanceof Array) { // 判断是否是数组 for (let j = 0; j < arr[i].children.length; j++) { temp.push(原创 2021-01-15 17:11:29 · 2477 阅读 · 0 评论 -
Service Worker的学习
Service Worker的学习限制：只有在https协议下 Service Worker 才能够被注册，本地调试可用localhost。一、注册service workerif (navigator.serviceWorker) { // 判断是否支持service worker // 注册service worker navigator.serviceWorker.regist...原创 2019-12-17 10:59:00 · 314 阅读 · 0 评论 -
indexedDB的学习
indexedDB的学习var myDB = { name:'testDB', version: '1', db:null}一、打开数据库使用indexedDB.open()方法打开数据库var request = window.indexedDB.open(myDB.name:数据库名称)error事件监听打开indexedDB失败。request.onerror ...原创 2019-12-16 16:08:44 · 249 阅读 · 0 评论 -
canvas实现文字水平垂直居中
canvas实现文字水平垂直居中eg: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> &...原创 2019-12-02 16:55:03 · 1742 阅读 · 0 评论 -
react-cropper实现头像裁剪
react-cropper实现头像裁剪1. 简单封装import React from 'react'import Cropper from 'react-cropper'import 'cropperjs/dist/cropper.css'class UserCropper extends React.Component { constructor(props) { su...原创 2019-10-08 18:22:53 · 1071 阅读 · 0 评论 -
nodejs实现获取微信公众号js-sdk开发配置
nodejs实现获取微信公众号js-sdk开发配置步骤：获取access_token（有效期7200秒）第一步拿到的access_token 采用http GET方式请求获得jsapi_ticket（有效期7200秒）生成签名:参与签名的字段包括noncestr（随机字符串）, 有效的jsapi_ticket, timestamp（时间戳）, url（当前网页的URL，不包含#及其后面部...原创 2019-08-29 10:36:20 · 671 阅读 · 0 评论 -
vue中解决html2canvas图片跨域问题
vue中解决html2canvas图片跨域问题html2canvas在截图的过程中，如果遇到html中有跨域地址的图片，即图片地址非本地，截图的时候将不会显示图片解决方法：html<div ref="imageDom"> <!-- 支持跨域的地址 --> <img :src="imgUrl+'?'+new Date().getTime()"...转载 2019-08-29 10:33:16 · 5073 阅读 · 1 评论 -
前端post请求报400错误
前端post请求报400错误发布时间： 2019-06-05 18:28:54400的错误是由于发送请求参数没有成功原因：参数名称类型没有对上；或者参数格式不正确参数格式不正确，解决方法：格式化传递给后台的参数1.使用axios对于请求的参数：引入qsimport qs from 'qs'axios({ method: 'post', url: url, data:...原创 2019-08-29 10:27:28 · 18394 阅读 · 0 评论 -
canvas绘制标尺
canvas绘制标尺eg:[预览链接](https://jsfiddle.net/jaris/gz06j95p/)发布时间： 2019-02-19 16:38:39/** * canvas 绘制标尺 * * params:{*} * axisWidth:Number,轴线的宽度，单位px * lineColor:String,轴线的颜色 * grid...原创 2019-08-29 10:11:09 · 4591 阅读 · 0 评论 -
THREE.JS获取截图
THREE.JS获取截图发布时间： 2019-01-03 17:15:571.渲染器的配置var renderer = new THREE.WebGLRenderer({ //将渲染保存到缓冲区，否则获取的图片会是空的 preserveDrawingBuffer: true,//是否保留缓冲区直到手动清除或覆盖。默认值为false});2.将渲染的canvas转化为base6...原创 2019-08-29 10:10:03 · 2732 阅读 · 0 评论 -
微信小程序利用canvas实现蜘蛛网图
微信小程序利用canvas实现蜘蛛网图发布时间： 2018-01-24 13:53:241、.wxml文件<!--canvas-id是canvas的唯一标识--><canvas style="width: 200px; height: 200px;" canvas-id="firstCanvas"></canvas>2、.js文件const app...原创 2019-08-27 18:00:46 · 639 阅读 · 0 评论 -
微信小程序利用canvas实现六边形蜘蛛图
微信小程序利用canvas实现六边形蜘蛛图发布时间：2018-01-24 14:30:291、.wxml<canvas style="width: 200px; height: 200px;" canvas-id="firstCanvas"></canvas>2、.jsconst app = getApp();Page({ //事件处理函数 canva...原创 2019-08-27 18:02:09 · 980 阅读 · 0 评论 -
原生JS可以直接使用ID名称来获取元素
原生JS可以直接使用ID名称来获取元素发布时间： 2018-03-16 18:01:31eg:html<form> <select name="choice" size="1" id="obj"> <option value="a">1</option> <option value="b">2</option>...原创 2019-08-28 10:05:44 · 1470 阅读 · 0 评论 -
three.js的认识
three.js的认识发布时间：2018-07-17 10:02:05一、什么是three.jsthree.js 是一个跨浏览器 JavaScript 库/API ,用于在web 浏览器中创建和显示3D图形。 three.js 是基于 WebGL开发的。它的代码托管在GitHub上。二、three.js的三要素###1.scene(场景)scene 是一个容器，用来保存并跟踪所有我们想...原创 2019-08-28 10:25:51 · 279 阅读 · 0 评论 -
js 实现图片缩放
js 实现图片缩放图标保持大小不变，位置相对于图片移动发布时间：2018-08-13 19:01:18html<div name="images1" style="zoom: 1; transform: scale(1); width: 5146px; height: 4583px;" id="images1"> <img id="floorPlanPicture" sr...原创 2019-08-28 10:27:11 · 2631 阅读 · 0 评论 -
探索three.js中的各种光源
探索three.js中的各种光源1.AmbientLight 环境光AmbientLight( color : Integer, intensity : Float )color：颜色值；intensity：光的强度，默认值为1。属性.castShadow:boolean 是否投射阴影这在构造函数中设为undefined，因为环境光不能投射阴影。.isAmb...原创 2019-08-29 09:57:28 · 346 阅读 · 0 评论 -
Three.js几何对象的组合
Three.js几何对象的组合##发布时间：2018-08-29 16:02:351.创建一个几何体2.创建一个Object3D对象或者Group对象3.将几何体添加进入Object3D对象或者Group对象中4.将Object3D对象或者Group对象添加进入场景中以下以十字为例：var cylinderGeometry = new THREE.CylinderGeometry(0...原创 2019-08-29 09:59:21 · 520 阅读 · 0 评论 -
探索three.js中的各种材质之共有属性
探索three.js中的各种材质 之共有属性##发布时间： 2018-08-30 16:00:39共有属性又分基础属性、融合属性、高级属性1.基础属性：这些属性是最常用到的。.id:Integer标识符用来标识材质，在创建时赋值.uuid：String UUID材质实例的UUID。这会自动分配，因此不应编辑。.name:String名称可以通过这个属性赋予材质名称.isMat...原创 2019-08-29 10:00:29 · 802 阅读 · 1 评论 -
THREE.JS绘制虚线
THREE.JS绘制虚线发布时间：2018-10-11 17:23:50 var lineGeometry = new THREE.Geometry();//生成几何体 lineGeometry.vertices.push(new THREE.Vector3(0, 1000, 5));//线段的两个顶点 lineGeometry.vertices.push(new THREE....原创 2019-08-29 10:02:33 · 3575 阅读 · 0 评论 -
js实现对象的复制，不影响原对象
发布时间：2018-10-23 10:52:141.Object.assign(target,…sources)因为 Object.assign()拷贝的是属性值。假如源对象的属性值是一个指向对象的引用，它也只拷贝那个引用值。eg:var obj1 = { a: 0 , b: { c: 0}};var obj2 = Object.assign({}, obj1);//将obj的可枚举的属...原创 2019-08-29 10:03:31 · 7091 阅读 · 0 评论 -
判断元素是否存在
#判断元素是否存在发布时间：2018-01-16 18:28:09###1.原生DOMvar obj = getElementById(id);//获取元素if(obj){//判断元素是否存在，若不存在则返回nullobj.innerHtml("hello,world!");//对存在的元素操作}###2.jquery因为jQuery对象永远都有返回值，KaTeX pars...原创 2019-08-27 17:53:11 · 326 阅读 · 0 评论