女王控的博客

全部

198 篇文章

HTML5 file API加canvas实现图片前端JS压缩并上传

图片上传前端压缩的现实意义 对于大尺寸图片的上传,在前端进行压缩除了省流量外,最大的意义是极大的提高了用户体验。 这种体验包括两方面: 由于上传图片尺寸比较小,因此上传速度会比较快,交互会更加流畅,同时大大降低了网络异常导致上传失败风险。 最最重要的体验改进点:省略了图片的再加工成本。很多网站的图片上传功能都会对图片的大小进行限制,尤其是头像上传,限制 5M 或者 2M 以内是非常常见的。然后现在的数码设备拍摄功能都非常出众,一张原始图片超过 2M… »

使用canvas在前端实现图片水印合成

图片合成最常见的需求有验证码图片,亦或者图片加水印等,这种实现一般都是后端实现的。 随着 HTML5 发展和现代浏览器的占比越来越高,我们其实也可以在前端直接进行图片的合成。优点在于,响应更快,体验更好;如果是和文字进行合成,我们可以利用客户端字体,视觉展现效果更丰富;同时展示和合成全部都是前端完成,因此更利于维护。 这里通过举个例子,演示如何在前端实现多个图片合成的效果,主要是借助 HTML5 canvas 相关技术。 使用 canvas… »

focus-within伪类及其交互应用

了解 CSS :focus-within 伪类 CSS :focus-within 伪类选择器和 IE8 就开始支持的:focus 可以说是近亲,区别在于:focus 表示当前元素处于 focus 状态时候干嘛干嘛,而:focus-within 表示当前元素或者当前元素的子元素处于 focus 状态时候干嘛干嘛。 举个例子: 表示仅仅当 处于 focus 状态时候, 元素 outline 出现。换句话说,子元素 focus… »

SVG/Canvas中nonzero和evenodd填充规则

填充的两种规则 只要是路径填充,都有两种规则 nonzero 和 evenodd,无论是 SVG 中的路径填充,还是 Canvas 中的路径填充,如果还有其他和路径相关的技术(甚至设计软件),也离不开这两种填充规则。 如果我们用 3 个点,连成一个三角形,则这两种填充规则没什么区别,如下对比 如果是两个三角形,并且发生重叠,差异就出现了,如下: 交叉点 填充规则的关键,就是确定复杂路径构成的图形,哪些是内部,哪些是外部。内部则填充,外部则透明。 “nonzero… »

CSS scroll-behavior和JS scrollIntoView让页面滚动平滑

假设页面中有下面这一段 HTML: 点击“返回顶部”这个文字链接的时候,页面就会“唰”地瞬间定位到浏览器顶部。 浏览器已经开始支持原生平滑滚动定位,CSS scroll-behavior 属性和 JS scrollIntoView()方法都可以。 CSS scroll-behavior 与平滑滚动 scroll-behavior:smooth 写在滚动容器元素上,可以让容器(非鼠标手势触发)的滚动变得平滑。 语法 初始值是’auto’。 凡是需要滚动的地方都加一句 scroll-behavior… »

0%