- 博客(12)
- 收藏
- 关注
原创 前端JS压缩图片
'use strict';import EXIF from 'exif-js';class ImageCompressor { constructor (options) { this.defaultOpptions = Object.freeze({ file: null, quality: 0.8, type: 'image/jpeg', scaleSize: 0, pngMaxSize: 2097152, wid
2021-05-05 15:16:47 177
原创 canvas translate rotate
canvas默认的(0, 0)是左上角,translate可以改变这个点的位置。下图100 * 200的长方形,translate(50, 100)后这个点就变成(0, 0),原本左上角此时是(-50, -100)。rotate方法是基于(0, 0)旋转画布,顺时针旋转90度后,x轴和y轴自然也旋转了,此时如果继续基于坐标操作,x,y轴相比之前没旋转是对调的,x轴成为了纵向,y轴是横向。...
2021-04-28 15:44:29 198
原创 css sprite雪碧图 background-position百分比
css sprite图在线生成工具background-position平时使用如background-position: 20px 30px时,背景图与容器(0,0)是对其的,也就是背景图和容器左上角重叠在一起,然后背景图在这个基础上往右移动20px, 往下移动30px。background-position假设指定百分比值,比如一张200 * 200的背景图,和一个100 * 100的容器,指定 background-position: 20% 30%。那么实际上背景图会先将自身(20% 30%)这
2021-02-20 14:16:35 249
原创 linear-gradient百分比用法基础
background: linear-gradient(to right, red, blue);上面一句也可以写成background: linear-gradient(to right, red 0%, 50%, blue 100%);默认第一个颜色是0%,指定渐变从0%处开始, 最后一个是100%,指定渐变到100%结束。如果一个既不是起始也不是终止的颜色中间点,没有被明确声明位置,那么这个颜色就会从前后两个颜色的中间位置开始。下图指定红色渐变从20%处开始,则20%之前红色纯色填.
2021-02-18 14:24:01 607
原创 javascript事件节流与防抖
防抖function debounce (handler, time) { let timer = null; return function () { clearTimeout(timer); const args = arguments; timer = setTimeout(() => { handler.apply(this, args); }, time); }; }节流(可触发最后一次事件执行
2021-01-20 17:13:40 44
原创 前端android禁止用户自定义放大系统字体
配合rem;(function flexible (window, document) { const docEl = document.documentElement; const dpr = window.devicePixelRatio || 1; // set 1rem = viewWidth / 10 function setRemUnit () { const width = docEl.clientWidth > 768 ? 768 : docEl.clien
2020-12-21 16:06:30 392
原创 dos2unix工具中将LF转换成CRLF
core.autocrlf=true 检出时,git 会把文本文件的换行符转化为 CRLF(只转化纯 LF 的文件),提交时,把暂存区的内容转化为 LF 然后放入版本库。转化暂存区的内容时,如果发现里面存在 LF 换行符,LF 会被转化成 CRLF,并警告:“LF will be replaced by CRLF”,但在工作区里,这个文件会保持它原本的换行符。假设设置 core.autocrlf=true ,工作区的文件都应该用 CRLF 来换行。如果改动文件时引入了 LF,或者设置 core.autoc
2020-12-10 20:08:30 1178
转载 git撤销提交
一、未使用 git add 缓存代码时可以使用 git checkout – filepathname (比如: git checkout – readme.md ,不要忘记中间的 “–” ,不写就成了检出分支了!!)。放弃所有的文件修改可以使用 git checkout . 命令。此命令用来放弃掉所有还没有加入到缓存区(就是 git add 命令)的修改:内容修改与整个文件删除。但是此命令不会删除掉刚新建的文件。因为刚新建的文件还没已有加入到 git 的管理系统中。所以对于git是未知的。自己手动
2020-12-01 17:24:54 428
转载 DataURL与File,Blob,Canvas之间的互相转换
DataURL:数据格式的url,src可以直接指向dataURL用来显示图片。图片被转换成base64编码的字符串形式,并存储在URL中,冠以mime-type。Bolb:是一种javascript对象类型,可以存储大量二进制数据HTML5的文件操作对象,file对象就是Blob的一个分支或说一个子集。1.Canvas 转换为 DataURL var dataurl = canvas.toDataURL('image/png') // 图片质量取原质量的0.8 var dataurl2
2020-09-24 17:26:03 358
原创 postmessage跨域不同窗口通信
window.postMessage() 方法可以安全地实现跨源通信,通过const newWin = window.open(url, ‘_blank’)打开新页面并获得新窗口的引用。注意这里第二个参数需要是’_blank‘,就是新建一个窗口,当前窗口不能被关闭,微信公众号里window.open实际还是在当前页面跳转,所以postmessage不生效,目前我不知道怎么解决。a页面给b页面发消息例子:a.htmlconst newWin = window.open(url, '_blank');n
2020-08-25 17:57:29 566 1
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人