Everything you care about in one place
Follow feeds: blogs, news, RSS and more. An effortless way to read and digest content of your choice.
Get Feederzhangxinxu.com
张鑫旭-鑫空间-鑫生活
Get the latest updates from 张鑫旭-鑫空间-鑫生活 directly as they happen.
Follow now 166 followers
Latest posts
Last updated 5 days ago
今天学习SVG滤镜feGaussianBlur和feDropShadow
5 days ago
by zhangxinxu from https://www.zhangxinxu.com/wordpress/?p=11166 鑫空间-鑫生活 本文欢迎分享与聚合，全文转载就不必了，尊重版权，圈子就这么大，若急用可以联系授权。 一、写在开头的絮絮叨 今天周日在家，本来想去钓鱼的，临出门，又不想了，唉……连续钓鱼，啥产出都没有，有负罪感，钓鱼都不开心。 算了，既然不愿意，何必勉强自己，虽然今天的天气非常时候钓鱼，阴天，温度稳定，全天鱼口都不算，买的红虫怕是也要浪费了。 所以，开始打开电脑学习，写作吧。 打开文档，快速过了一边，看看还有什么自己不知道的，再评估下学习难度，嗯……目前这个阶段比较适合学习的是feGaussianBlur和feDropShadow这两个滤镜元素，因为都是静态效果，也就是不需要和其他元素发生交集就能有效果。 好，抓紧时间，看看能不能今天把这篇文章给撸出来。...
SVG滤镜系列之搞懂元素
8 days ago
by zhangxinxu from https://www.zhangxinxu.com/wordpress/?p=11158 鑫空间-鑫生活 本文欢迎分享与聚合，全文转载就不必了，尊重版权，圈子就这么大，若急用可以联系授权。 一、前言 SVG滤镜元素我之前有深入介绍过两个，一个是feTurbulence滤镜，另外一个是 feDisplacementMap滤镜，前者可以用来模拟自然效果，后者可以实现元素形变，都是SVG滤镜比较高级的应用。 最近，正好无所事事，就决定查漏补缺，把SVG滤镜元素整个都过一遍，系统了解下，让对这一块的了解更加扎实，说不定以后就用到，提前做技术储备。 先从比较简单的<feBlend>元素开始。 二、feBlend元素的作用和语法...
CSS Nesting嵌套与@scope规则也太雷同了吧？
19 days ago
by zhangxinxu from https://www.zhangxinxu.com/wordpress/?p=11144 鑫空间-鑫生活 本文欢迎分享与聚合，全文转载就不必了，尊重版权，圈子就这么大，若急用可以联系授权。 一、居然还有个CSS嵌套 年前有介绍CSS @scope规则，可以实现CSS的选择器内外嵌套，简化选择器的书写： @scope(nav) { ul...
CSS initial-letter属性，嗯……也就这样吧
29 days ago
by zhangxinxu from https://www.zhangxinxu.com/wordpress/?p=11142 鑫空间-鑫生活 本文欢迎分享与聚合，全文转载就不必了，尊重版权，圈子就这么大，若急用可以联系授权。 一、作用简述 Chrome 110开始支持CSS initial-letter属性了。 initial letter的意思就是首字母，其作用是设置首字母的可以占据多少行文本的高度。...
今天才知道，Web网页也能阻止息屏了
about 1 month ago
by zhangxinxu from https://www.zhangxinxu.com/wordpress/?p=11135 鑫空间-鑫生活 本文欢迎分享与聚合，全文转载就不必了，尊重版权，圈子就这么大，若急用可以联系授权。 一、阻止屏幕黑屏休眠 之前做PPT录制的时候，一个电脑显示台词，一个电脑录制，然后显示台词的那个电脑没几分钟就黑屏，烦不胜烦，没办法，就打开一个视频，窗口小小的，也就是画中画模式， 今天才发现，原来不久前，Chrome和Safari浏览器都支持了名为Screen Wake Lock的API，可以设置Web网页打开的状态下，显示器屏幕不会自动休眠。 根据我查找的资料显示，美国知名烹饪网站...
不改变音调情况下Audio音频的倍速合成JS实现
about 2 months ago
by zhangxinxu from https://www.zhangxinxu.com/wordpress/?p=11124 鑫空间-鑫生活 本文欢迎分享与聚合，全文转载就不必了，尊重版权，圈子就这么大，若急用可以联系授权。 一、以为很简单，结果… 遇到需求，需要对音频倍速合成，可能是0.5倍速，也可能是2倍速。 这还不简单，0.5倍速那就采样的时候两两重复，2倍速间隔取样就好了，相关代码如下所示（假设音频地址是url，播放速率变量是rate）： fetch(url) .then(response =>...
HTML MicroData微数据结构简介
3 months ago
by zhangxinxu from https://www.zhangxinxu.com/wordpress/?p=11116 鑫空间-鑫生活 本文欢迎分享与聚合，全文转载就不必了，尊重版权，圈子就这么大，若急用可以联系授权。 MicroData微数据相关的知识适用于对SEO非常重视的产品，且主要针对谷歌、微软、雅虎等国外的搜索引擎，适用场景较为小众，因此，本文内容大致了解下即可。 所谓微数据，就是在原有的HTML元素基础上，通过设置若干专门给机器识别的HTML属性，让搜索引擎可以更好地理解这一块的数据。在具体展开介绍之前，有必要先介绍https://schema.org/这个网站，准确说这是一个开源协作的社区组织，由谷歌、微软、雅虎和Yandex创建，致力于在互联网、网页、电子邮件等平台上创建、维护和推广结构化数据的模式。 由于大厂的支持和社区的推动，schema.org网站所共享的词汇表已经成为某种实时标准，超过1000万个网站使用schema.org定义的微数据结构来开发网页、发送邮件等，大家如果有兴趣，也可以前往对应的Github项目（https://github.com/schemaorg/schemaorg）参与共享，目前已经发布了24个版本了。 一、微数据常用词汇表 既然是规范，那必然意味着不能随便使用。例如，微数据只能对特定的物体或事件进行描述，并不能随便自定义???至于哪些物体和事件可以用，就需要看有没有对应的词汇表了。 schema.org网站上的词汇表非常多，但是我们只需要关注其中的常用词汇表即可，例如：...
CSS @scope他来了
3 months ago
by zhangxinxu from https://www.zhangxinxu.com/wordpress/?p=11110 鑫空间-鑫生活 本文欢迎分享与聚合，全文转载就不必了，尊重版权，圈子就这么大，若急用可以联系授权。 一、背景前言 随着Safari TP版本已经支持CSS @scope规则，这个新特性在不久的将来在Web中大放异彩已是必然。 那这样@scope规则是干什么用的呢？ 二、@scope的语法与作用...
使用JS快速获取video视频任意位置的缩略图
3 months ago
by zhangxinxu from https://www.zhangxinxu.com/wordpress/?p=11103 鑫空间-鑫生活 本文欢迎分享与聚合，全文转载就不必了，尊重版权，圈子就这么大，若急用可以联系授权。 一、先看效果 您可以狠狠地点击这里：JS每隔一秒提取视频缩略图demo 例如，选择本地视频后： 输入在线的视频文件地址后，注意，该地址要允许跨域，也可以看到缩略图出现了，前后也就几秒钟的时间，还是挺快的。 二、如何实现？ 方法一，对视频帧进行完全解码，然后进行提取，相关实现可以参考“mp4box.js加WebCodecs...
时代变了，该使用原生popover属性模拟下拉了
3 months ago
by zhangxinxu from https://www.zhangxinxu.com/wordpress/?p=11097 鑫空间-鑫生活 本文欢迎分享与聚合，全文转载就不必了，尊重版权，圈子就这么大，若急用可以联系授权。 一、事务繁忙，长话短说 目前主流的下拉列表，或者下拉面板的实现方式都是这样的。 点击按钮，让下拉元素显示，绝对定位，同时设置层级，点击空白处，隐藏下拉列表。 其中，每一步都需要JavaScript代码的参与，因此，一个下拉组件的JS代码量还是不容小觑的。 现在，浏览器已经支持原生popover属性，上面这种下拉列表实现方式可以扫进垃圾箱了。我可以这么说，日后使用popover属性实现下拉效果一定是主流实现方案。 因为有两个好处：...
纯JS实现图像的人脸识别功能
4 months ago
by zhangxinxu from https://www.zhangxinxu.com/wordpress/?p=11088 鑫空间-鑫生活 本文欢迎分享与聚合，全文转载就不必了，尊重版权，圈子就这么大，若急用可以联系授权。 一、效果抢先体验 纯JS就可以实现人脸识别功能，加载模型，执行识别。 眼见为实，您可以狠狠地点击这里：JS判断人脸画面区域demo 本demo提供了3处交互案例，分别是无人脸，有人脸和自定义上传。 例如第一张图，显示无人脸： 其实，是有个小小的人脸的，我一开始也没注意，因为图片尺寸比较小，哈哈哈，如果是大尺寸图片，估计是可以识别的。...
JS实现图片相似度的判断
4 months ago
by zhangxinxu from https://www.zhangxinxu.com/wordpress/?p=11084 鑫空间-鑫生活 本文欢迎分享与聚合，全文转载就不必了，尊重版权，圈子就这么大，若急用可以联系授权。 一、图片近似度对比 开门见山，不绕弯路。 用的是这个Github项目：https://github.com/obartra/ssim 之所以选这个，是我看这个项目提交次数比较多，文件版本也比较高。 案例先行 不管怎样，先看对比效果。...