04 2020 档案

javascript 利用 Math.min 与 Math.max 优化逻辑判断
摘要：Math.min 和 Math.max 方法常用来获取多个数值的最小值和最大值，比如： Math.min(10, 30, 40, 3); // 返回 3 Math.max(10, 30, 40, 3); // 返回 40 利用此特性，可以优化一些常见数字判断，尤其在方法传参时候，数字判断能有奇效。 阅读全文
posted @ 2020-04-24 16:10 前端路引 阅读(593) 评论(0) 推荐(0)
canvas 获取图片中某个坐标的颜色
摘要：强大的 canvas 可以做很多事，包括手绘，压缩图片，图片滤镜，3D效果等等。 本文仅用 canvas 冰山一角的功能获取坐标点颜色。 源码： <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" co 阅读全文
posted @ 2020-04-24 14:03 前端路引 阅读(4187) 评论(0) 推荐(0)
hexo 图片添加水印（png, jpeg, jpg, gif）
摘要：本文折腾 hexo 图片添加水印功能，大部分代码沿用： nodejs 图片添加水印（png, jpeg, jpg, gif） 方案一 使用现有插件：https://github.com/SpiritLing/hexo-images-watermark 问题：依赖 sharp 安装困难 方案二 使用 阅读全文
posted @ 2020-04-23 17:56 前端路引 阅读(1068) 评论(0) 推荐(0)
nodejs 图片添加水印（png, jpeg, jpg, gif）
摘要：nodejs 作为一个脚本语言，图片处理这方面有点弱鸡，无法跟 php 这种本身集成了图片 api 的语言相比。 不过好在有 https://www.npmjs.com/ ，上面有全世界的大佬写的各种高大上的插件使用。 本文踩在巨人的肩上介绍 nodejs 添加图片水印的几种方式。 方案一：使用云处 阅读全文
posted @ 2020-04-21 16:46 前端路引 阅读(3823) 评论(0) 推荐(0)
css 技巧：利用 after 伪对象和 background 属性实现 img 图片标签占位图
摘要：如图： 图片加载失败了，在浏览器会默认显示一张破图。受各种网速、浏览器等因素影响，我们无法保证图片能够完全加载成功。加载失败时如何更友好的显示是前端要考虑的主要因素。 常见做法都是使用一张默认图代替加载失败的图片，比如一个 logo 、一张主题图片等。 做法一 使用 JS 懒加载图片，如果图片加载失 阅读全文
posted @ 2020-04-16 10:27 前端路引 阅读(3199) 评论(0) 推荐(0)
SVG path 标签根据两点和角度绘制弧线
摘要：解析 <path> 标签应该算是 SVG 中最为强大的标签了，各种图形都可以用他绘制。本文使用 path 标签的贝塞尔曲线 Q 指令绘制弧线。 用法 <path d="M30 90 Q115 139 200 90"></path> <path> 标签常用指令： M = moveto L = line 阅读全文
posted @ 2020-04-14 18:01 前端路引 阅读(6938) 评论(0) 推荐(0)