byzhangxinxufromhttps://www.zhangxinxu.com/wordpress/?p=11043鑫空间-鑫生活本文欢迎分享与聚合，全文转载就不必了，尊重版权，圈子就这么大，若急用可以联系授权。一、已有的学习资源WebCodecs API解码GIF动图之前已经撰文介绍过了，访问“使用ImageDecoder API让GIF图片暂停播放”。然后使用Webcodecs API编码带音频的MP4文件在这篇文章中有介绍过了，演示页面可以狠狠地点击这里：canvas序列+MP3音频实现mp4视频demo并且基于上面的实现原理，我把之前开发的APNG在线生成工具稍微扩展了下，同时支持生成MP4文件并下载，有兴趣可以狠击这里体验：APNG/MP4在线合成下载工具OK，好，最近又遇到新需求，需要对MP4视频进行解码。关于MP4视频解码，之前有介绍过JSMpeg和Broadway两个项目，不过自己demo并没有跑通，就没有深究。这一回，由于有了webcodecs API，我确信一定可以解码，因此，就花半天时间研究了下，算是跑通了整个流程，可以说是市面上最简洁，依赖最少的实现代码了。二、先看需求和效果需要用到视频解码的需求很多，例如：纯JS前端实现视频的拼接或剪裁视频添加水印变成新视频视频格式的滤镜应用在webGL特效上视频转为canvas播放以规避Android下Video元 ...继续阅读 (100)

byzhangxinxufromhttps://www.zhangxinxu.com/wordpress/?p=11038鑫空间-鑫生活本文欢迎分享与聚合，全文转载就不必了，尊重版权，圈子就这么大，若急用可以联系授权。一、Chrome的5层优先级在Chrome浏览器中，网络请求的优先级分成了5个等级：Highest 最高，如页面HTML资源和CSS文件；High 高，如正文图片请求资源；Medium 中等，如页面的业务JavaScript文件请求；Low 低，如内联的Base64资源，异步加载的JavaScript文件请求；Lowest 最低，如发送的统计请求；我们可以Chrome浏览器的开发者工具，在Network面板中可以看到每一个请求的优先级，如下图所示。如果你发现你的浏览器没有上图选中的列表，试试右键面板，然后访问下图所示的菜单项进行开启。二、预加载资源的优先级我们可以使用link rel="prefetch"和link rel="preload"对资源进行预加载，以提高页面性能，增强产品的用户体验。然而，这两种预加载的优先级是不一样的。prefetch加载的是接下来页面可能会使用的资源，因此优先级最低，为Lowest。preload加载的是本页即将要使用的资源，因此优先级要比prefetch高，但具体是多少，要看加载的资源的类型。这个类型是as属性决定的，下面是一些类型示 ...继续阅读 (107)

byzhangxinxufromhttps://www.zhangxinxu.com/wordpress/?p=11022鑫空间-鑫生活本文欢迎分享与聚合，全文转载就不必了，尊重版权，圈子就这么大，若急用可以联系授权。一、温故而知新3年前有更新过JS对audio音频剪裁的实现，昨天更新了JS改变原始音频信息来实现音量的调整，今天我们再讲讲如何使用JS实现多个音频的拼接（下图1）与合并（下图2）。拼接：合并：这下子，纯JS操作MP3/WAV音频资源的活儿都齐全了。操作过程本质上大同小异。ArrayBuffer转AudioBuffer，然后读取音频信息，对采样信息进行处理。话不多说，来看看如何实现的。二、多个音频的拼接方法如下：// 拼接音频的方法 const concatAudio = (arrBufferList) => { // 获得 AudioBuffer const audioBufferList = arrBufferList; // 最大通道数 const maxChannelNumber = Math.max(...audioBufferList.map(audioBuffer => audioBuffer.numberOfChannels)); // 总长度 const totalLength = audioBuffer ...继续阅读 (98)

byzhangxinxufromhttps://www.zhangxinxu.com/wordpress/?p=11026鑫空间-鑫生活本文欢迎分享与聚合，全文转载就不必了，尊重版权，圈子就这么大，若急用可以联系授权。如今的Web越来越强，几乎常见的音视频开发需求都能使用纯JS搞定了。一、这里需要个标题这里介绍一个不太常见的使用场景的技术实现。啥呢，就是音频的音量调整，并转换成新文件。如果仅仅是调整播放的音量，那很简单。如果你使用的是元素，直接改变volume属性就好了。audio.volume = 0.5;over~如果没有audio元素，而是使用的Web Audio API，希望在 AudioBuffer 层面设置播放的音量，则可以使用GainNodes实现。假设我们有个在线的MP3音频叫做“bgmusic.mp3”，则可以这么处理。// 定义一个AudioContext对象 // 因为 Web Audio API都是源自此对象 const audioContext = new AudioContext(); // 创建一个gainNode对象 // gainNode可以对音频输出进行一些控制 const gainNode = audioContext.createGain(); // 音量设置为20% gainNode.gain.value = 0.2; // 这个很有必要， ...继续阅读 (109)

byzhangxinxufromhttps://www.zhangxinxu.com/wordpress/?p=11015鑫空间-鑫生活本文欢迎分享与聚合，全文转载就不必了，尊重版权，圈子就这么大，若急用可以联系授权。一、总要有原因的为什么会突然想到了解如何使用JS复制图片到剪切板呢？因为上周弄了个PNG/JP在线压缩的工具，一开始的时候，图片获取的途径只能是下载到本地。但很多时候，我是希望这种压缩好的图片可以直接上传，不需要再从本地转一圈。此时，如果有一个复制功能就好了。直接点击一个按钮，压缩好的图片复制到剪切板，然后再去上传页面进行上传，多方便，多轻松。所以，就去了解了下，还是学到了不少东西的。这里和大家分享下。首先，先从简单的开始。二、原生的图片复制API浏览器提供了一个名为 ClipboardItem 的实例对象，可以构造构造剪切板复制对象。例如一段文本的复制（代码取自MDN文档）：function setClipboard(text) { const type = "text/plain"; const blob = new Blob([text], { type }); const data = [new ClipboardItem({ [type]: blob })]; navigator.clipboard.write(data).then(() ...继续阅读 (110)

byzhangxinxufromhttps://www.zhangxinxu.com/wordpress/?p=10971鑫空间-鑫生活本文欢迎分享与聚合，全文转载就不必了，尊重版权，圈子就这么大，若急用可以联系授权。一、开场总要有个标题上个月有好好研究PerformanceObserver这个性能监控相关的API。不过，玩了一圈下来，没有找到统计某个图片加载时长，或者某个元素渲染时间的入口，难道是自己错过了什么了吗？嘿，还真是错过了！有些出乎意料，明明是PerformanceObserver API明明是个JS API，里面的方法啥的，也都是JS驱动的，结果统计元素的渲染和加载时长却靠的是一个HTML属性——elementtiming。二、了解elementtiming属性elementtiming属性可以设置在任何有图文内容的元素上，包括background-image背景图，对了，还有视频元素。相对于告诉浏览器：“喂，浏览器酱，这几个人老子很感兴趣，你帮我看紧了，多多关注下！”此时，浏览器就会记住这些元素的加载时长，渲染时长等各种信息。配合PerformanceObserver API，我们就可以获得这些信息了。案例说明假设页面上有下面两个HTML元素。我是一段内容。此时，浏览器就会重点关注标志量为image和text的两个元素的元素时长相关信息。于是，通过执行下面的代码，我 ...继续阅读 (105)

byzhangxinxufromhttps://www.zhangxinxu.com/wordpress/?p=11003鑫空间-鑫生活本文欢迎分享与聚合，全文转载就不必了，尊重版权，圈子就这么大，若急用可以联系授权。一、深入了解form的reset行为form元素自带一个reset方法，执行后，可以让当前表单元素控件的值还原为初始设置的值。这是一个非常有用的特性。例如，我们表单数据请求成功后，就可以执行此方法。form.reset()注意，reset行为不是让输入框的值变成空，而是变成匹配:default伪类的初始值。例如，有如下的表单元素：重置当我们修改输入框的值，再去点击“重置”按钮，输入框的值依然是"author:zhangxinxu"而非空字符串。如下GIF录屏所示。无法触发change行为reset虽然好用，但并不完美。在真实的表单应用场景中，我们会有很多行为是跟着输入框的值走的。例如，验证行为，一些参数的计算等。此时，我们往往会使用change事件（或input事件）来进行处理，举个例子，商品总额根据数量进行计算：单价：¥68数量：件总价：68元重置JS代码则是：const input = document.querySelector('[type="number"]'); const output = document.querySelector('output') ...继续阅读 (110)

byzhangxinxufromhttps://www.zhangxinxu.com/wordpress/?p=10983鑫空间-鑫生活本文欢迎分享与聚合，全文转载就不必了，尊重版权，圈子就这么大，若急用可以联系授权。一、自制工具的背景由于笔耕不缀，所以经常需要对截图进行处理。无论是哪个截图工具，其保存在剪切板中的（或准备下载的）都一定是无损的PNG图像。无损PNG图像的尺寸比较大，尤其是那些色彩丰富的图像，更是比同尺寸的JPG图像大了好几倍。这就会导致在Web网页中传输的时候，加载缓慢，内存占用高，流量开销大等诸多问题。比方说我的博客文章，就有强烈的对截图进行尺寸优化的需求。在Windows操作系统下，我都是使用Faststone Capture这个软件，非常好用。但是在MacOS下，却一直没有什么满意的软件。我都是使用tinypng这个网站进行尺寸优化。但是tinypng也有不足，就是没法改变压缩图片的尺寸，比方说原图是2560*1920，我希望图片缩小到512*384，同时进行压缩，tinypng就无能为力。然后就使用在线PS，稿定的在线PS图片导出还需要登录，国外的在线PS网站“佛特屁”导出免登录，可如果不熟系Photoshop软件，操作起来也是有些不易的。总而言之，压图需求强烈，又没有合适的工具，所以我就决定自己做一个纯前端实现的JPG/PNG压缩工具，不仅可以压缩，还可 ...继续阅读 (110)

byzhangxinxufromhttps://www.zhangxinxu.com/wordpress/?p=10969鑫空间-鑫生活本文欢迎分享与聚合，全文转载就不必了，尊重版权，圈子就这么大，若急用可以联系授权。一、前事不忘后事之师第一眼看到registerProtocolHandler()方法的时候，说实话，我还是挺兴奋的。这可是个有趣的东西啊，居然可以自定义协议地址，并且可以像正常链接一样访问。试想下，有个链接地址是：CSS标签点击后，可以自动访问CSS标签页面，是不是很帅气？又是装逼于无形的一大利器啊，哈哈哈。可是，当我深入体验这个API之后……嗯……怎么说呢……唉，只能说一言难尽，具体什么情况，听我慢慢道来。二、鸟来还语法，客去更安禅registerProtocolHandler的使用分为注册和使用两部分。首先是注册。所有自定义的协议头，一定要是web+开头，后面至少跟随一个英文字母（不能有数字，否则会报错）。否则只能使用下面之一的协议。bitcoinftpftpsgeoimircircsmagnetmailtomatrixmmsnewsnntpopenpgp4fprsftpsipsmssmstosshtelurnwebcalwtaixmpp而上面很多协议，浏览器是内置原生行为的，例如tel、mailto、ftps等，看起来是不能随便定义的，否则有可能会冲突。所以，先 ...继续阅读 (109)

byzhangxinxufromhttps://www.zhangxinxu.com/wordpress/?p=10967鑫空间-鑫生活本文欢迎分享与聚合，全文转载就不必了，尊重版权，圈子就这么大，若急用可以联系授权。这篇文章好好讲讲Web中的referrer策略，以及一些应用。一、从document.referrer说起document.referrer可以获取页面的来源信息。在移动端，我们可以根据此属性值是否为空，来决定左上角的按钮是返回还是回到首页。关于这个，之前有撰文介绍过，六年前的文章。不过当时只是浅尝辄止，并没有深入具体的referrer策略，这一次，好好说说这个事情。然后，referrer策略服务端也是可以设置的，但本文仅仅讨论前端部分的技术实现。二、具体的referrer策略在 HTTP header 中有个名为Referrer-Policy的状态，可以决定目标页面中document.referrer的返回值，以及对页面中外链资源的请求影响。Referrer-Policy: no-referrer Referrer-Policy: no-referrer-when-downgrade Referrer-Policy: origin Referrer-Policy: origin-when-cross-origin Referrer-Policy: same-orig ...继续阅读 (116)

byzhangxinxufromhttps://www.zhangxinxu.com/wordpress/?p=10950鑫空间-鑫生活本文欢迎分享与聚合，全文转载就不必了，尊重版权，圈子就这么大，若急用可以联系授权。一、Observer家族没想到Observer家族还有个PerformanceObserver，这就有点匪夷所思，就是，之前我明明好好梳理过浏览器目前支持的Observer，但是都2023年了，突然出现个PerformanceObserver，就非常让人觉得不真实，之前怎么就没看到呢？MutationObserver可以用来观察DOM元素的变化，ResizeObserver可以用来观察DOM元素尺寸的变化，IntersectionObserver则可以观察元素和浏览器视窗相交的情况。而本文要介绍的 PerformanceObserver 则可以对页面的各项性能指标进行观察。二、关于性能 Performance APIPerformance API是个庞大的家族，根本学不动的，看看下面这些（参考自MDN文档），知识密度也不是一般的高。PerformanceEntryPerformanceEntryPerformanceMarkPerformanceMarkPerformanceMeasurePerformanceMeasurePerformancePaintTiming ...继续阅读 (108)

byzhangxinxufromhttps://www.zhangxinxu.com/wordpress/?p=10939鑫空间-鑫生活本文欢迎分享与聚合，全文转载就不必了，尊重版权，圈子就这么大，若急用可以联系授权。前言数年前有整理过“HTML全局属性列表大全”，今天再次温习了下，发现尚有缺漏，所以这里再次记录下。缺了这两个HTML属性，一个是 nonce，另一个是 popover。一、安全与noncenonce的中文意思是“临时造的，偶造的，只使用一次的”，配合“内容安全策略（Content Security Policy，简称CSP）”，可以决定给定元素的请求是否执行。应用常用是这样的。前端是可以通过元素指定页面的内容安全策略的，例如：可以让只有和页面同域名的静态资源才加载，同时，会阻止页面上所有内联JavaScript的执行，这样，可以有效避免XSS攻击。例如有页面代码：DOCTYPE htmlCSP unsafe-inline与内联JS和CSS的执行没有alert提示出现。alert('hello world');元素内指定了某个 CSP 策略，此时，内联的元素内的JS代码是不执行的，也就是页面不会出现 alert 提示。不仅如此，页面还会报一些错误：Refused to execute inline script because it violates the foll ...继续阅读 (154)

byzhangxinxufromhttps://www.zhangxinxu.com/wordpress/?p=10931鑫空间-鑫生活本文欢迎分享与聚合，全文转载就不必了，尊重版权，圈子就这么大，若急用可以联系授权。一、代码呈现元素以前我都是使用元素表示代码，最近深入了解了下，发现表示代码、或者可以用来表示代码的HTML元素还挺丰富的，包括下面这4个。kbd: 键盘输入的文字内容samp: 范例输出code: 计算机代码输出var: 变量与自变量实例均是内联元素。而元素本身的语义和代码无关，只是格式化文本的特性特别适合呈现代码。下面通过案例，讲解下各个HTML元素适合使用的场景。1. kbd元素元素表示用户输入的信息内容。比方说，我们示意 git 使用代码，程序员输入的信息就使用使用表示。例如：D:\zxx\css-world >git checkout master浏览器默认会给元素添加等宽字体，例如我的Windows Chrome下是monospace字体族。效果参考如下：2. samp元素元素表示案例结果输出，不一定是代码运行结果的输出，其他运行输出也是可以使用此元素。比方说：'3'.padStart(2, '0')会自动补零，因此输出文本是'03'元素同样会应用monospace字体族，多以Courier 或者 Lucida Console 字体为主。3. code元素元 ...继续阅读 (145)

byzhangxinxufromhttps://www.zhangxinxu.com/wordpress/?p=10923鑫空间-鑫生活本文欢迎分享与聚合，全文转载就不必了，尊重版权，圈子就这么大，若急用可以联系授权。一、开门见山text-wrap:balance可以让每一行文字的个数尽可能的相等，即使宽度足够的大。下面这张图很好地演示了这种排版特性。眼见为实，您可以狠狠地点击这里：CSS text-wrap:balance与文字排版demo这种文字排版布局，特别适合用在居中描述信息的呈现中，尤其是官网首页的slogan等信息。比方说下面GIF的录屏示意，可以看到balance的效果明显好了很多。在过去，这样的效果，往往需要 wbr 标签来实现。二、关门口街虽然说text-wrap属性本意是控制文字的排版，实际上，任何的内联元素其都是可以控制的。因此，我们可以使用text-wrap:balance声明实现一些过去我们不太方便实现的排版效果。比方说点赞功能要显示点赞人的头像，在过去，可能是这样的排版，第一行可能很多，第二行就几个，排版效果并不是很美丽，如下图所示。如果我们该用text-wrap:balance声明来实现，则每一行的头像会尽可能的数量相等，体验会好很多，如下图所示。眼见为实，您可以狠狠地点击这里：text-wrap:balance实现图文布局demo三、兼容性和poly ...继续阅读 (125)

byzhangxinxufromhttps://www.zhangxinxu.com/wordpress/?p=10915鑫空间-鑫生活本文欢迎分享与聚合，全文转载就不必了，尊重版权，圈子就这么大，若急用可以联系授权。已知图片尺寸未知，比例不详，但是需要按照1:1的比例显示，一行四个，且宽度自适应，永远弹性响应。如下MP4视频效果示意（不动点击播放）。请问，此效果由你来实现，你会如何实现呢？一、百分比padding要让一个元素内容按照固定比例显示。在过去，那个还需要兼容IE浏览器的年代，基本上都是使用百分比padding实现的，因为padding的百分比计算值都是相对于宽度计算的，哪怕是垂直方向。例如：div { padding: 100% 100% 0 0; }就会撑起一个1:1的div元素。我们就可以利用此特性，让图片1:1高宽比弹性显示。HTML结构如下，需要三层标签，一层宽度，一层确定高宽，最后图片填充。...CSS代码示意如下，为了兼容IE9，特意使用了传统的浮动布局。.box { overflow: hidden; } .list { width: calc(25% - 1.5rem / 4); float: left; margin-bottom: .5rem; } .list:not(:nth-child(4n + 1)) { ...继续阅读 (128)

byzhangxinxufromhttps://www.zhangxinxu.com/wordpress/?p=10901鑫空间-鑫生活本文欢迎分享与聚合，全文转载就不必了，尊重版权，圈子就这么大，若急用可以联系授权。一、前言就在最新，所有现代浏览器均支持了 CSS 数学函数中的三角函数，包括下面这些：sin()cos()tan()asin()acos()atan()atan2()兼容性见下图，以sin()函数举例。这7个三角函数中，有的函数根据角度返回对应的弧度值，有的是根据弧度值返回对应的角度值（以字母 a 打头的那几个函数）。示意：/* 正弦函数 */ width: calc(100px * sin(45deg)); /* 反正弦 */ transform: rotate(asin(-0.2));首先，通过一个简单的案例，看看三角函数的渲染表现效果。这个案例之前有专门撰文介绍通过，就是如何实现折线图，不过当时是使用JS实现的，这里会演示如何使用CSS数学函数实现，代码肯定比之前简介了很多。二、位置与折线需求如下，已知两个点的坐标，绘制这两个点，以及点与点之间的连接线。效果先行您可以狠狠地点击这里：CSS驱动的折线效果demo效果如下GIF录屏示意，点击按钮，随机生成两个点，可以看到折线自动跟随了。其中，就用到了三角函数。具体实现具体实现如下，首先是HTML代码：外面是盒子元素 ...继续阅读 (132)

byzhangxinxufromhttps://www.zhangxinxu.com/wordpress/?p=10889鑫空间-鑫生活本文欢迎分享与聚合，全文转载就不必了，尊重版权，圈子就这么大，若急用可以联系授权。一、嘿嘿，先看效果如下 GIF 录屏图片示意，点击按钮，就会出现百分比数字不停递增的画面。注意，这个不是真Loading，而是纯CSS模拟的假loading。最近做的某个项目就用到了这个。因为有个不知道什么时候才知道结果的轮询请求，为了让用户耐心等待，有必要搞个假进度，相比单纯的转转转，显然体验要更好。不过，模拟数字loading还是需要点CSS功力的。为了方便大家学习，我们不妨先从简单的实现开始介绍。二、前菜，假进度条loading我记得我很多年前，我实现过假的进度条loading的，结果demo和文章都找不到了。咦，难道是梦里实现的吗？稍等，我用AI绘制个做梦的美图……妈呀，发现提示词不能出现床，否则不行，试了几个都是如此。这是一个单人房间，光线不亮也不暗，房间有一个人，沉睡，身上盖着毯子，正在做美梦，需要体现梦境内容，画质清晰，动漫风格。吓死人的效果：这是一个单人房间，光线不亮也不暗，房间有一个帅哥，躺着，沉睡，身上盖着毯子，脑门上有气泡，气泡中出现了美丽的女子，看来做了个美梦，一定要体现梦境内容，画质清晰，动漫风格。智障般的效果以及残疾人效果：算了，不玩了，浪 ...继续阅读 (110)

byzhangxinxufromhttps://www.zhangxinxu.com/wordpress/?p=10872鑫空间-鑫生活本文欢迎分享与聚合，全文转载就不必了，尊重版权，圈子就这么大，若急用可以联系授权。一、之前我的实现1. canvas实现之前噪点背景效果我是用canvas实现的，文章介绍这里：“canvas图形绘制之星空、噪点与烟雾效果”演示页面地址是这个：canvas实现的噪点效果demo2. SVG实现SVG可以使用feTurbulence滤镜实现，这个滤镜很实用，可以模拟自然随机效果，我之前有专门研究过，详见“SVG feTurbulence滤镜深入介绍”一文。具体实现如下：实时渲染效果为：没想到，原来CSS也可以实现类似的效果。二、CSS实现白噪点代码简单地出奇，如下所示：canvas { background: linear-gradient(#000a, #000a), repeating-radial-gradient(#000 0 0.0001%, #fff 0 0.0002%) 50% 0 / 2500px 2500px, repeating-conic-gradient(#000 0 0.0001%, #fff 0 0.0002%) 60% 60% / 2500px 2500px; background-blend-mo ...继续阅读 (108)

byzhangxinxufromhttps://www.zhangxinxu.com/wordpress/?p=10854鑫空间-鑫生活本文欢迎分享与聚合，全文转载就不必了，尊重版权，圈子就这么大，若急用可以联系授权。一、jsPDF项目简介最近遇到个需要将网页中特定内容转为PDF的需求，所以有机会试用了下jsPDF，也遇到了一些问题，这里分享给大家了。首先，项目地址：https://github.com/parallax/jsPDF目前2.6万的star数，可以说是Github上Top级别的项目了，也是Web导PDF的首选解决方案。官方的使用示意也很简单，构造，内容和保持。import { jsPDF } from "jspdf"; // 默认是 a4 纸张尺寸，纵向，单位是mm const doc = new jsPDF(); doc.text("Hello world!", 10, 10); doc.save("a4.pdf");好，接下来，就是把页面中的DOM内容作为PDF内容就可以了，理论上如此，但实际使用却令人深思。二、内置html()方法惊为天人jsPDF内置一个名为html()的方法，可以直接让HTML元素作为PDF的内容。var doc = new jsPDF(); // element就是需要转变为pdf的DOM元素 doc.html(element, { ...继续阅读 (112)

byzhangxinxufromhttps://www.zhangxinxu.com/wordpress/?p=10858鑫空间-鑫生活本文欢迎分享与聚合，全文转载就不必了，尊重版权，圈子就这么大，若急用可以联系授权。一、一言以蔽之CSSmargin-trim属性设置在容器元素上，可以让子元素（需边缘接触）的margin设置计算值变成0。二、语法、演示语法如下示意：margin-trim: none; margin-trim: block; margin-trim: block-start; margin-trim: block-end; margin-trim: inline; margin-trim: inline-start; margin-trim: inline-end;仅支持逻辑CSS属性值，表示哪个方位的margin需要修剪。inline表示内联元素的排版方向，也就是水平，block表示块级元素的排版方向，自然表示垂直了，也就是上下。使用示意margin-trim使用在设置了margin的列表中，或者不断重复的标签项中。举个例子，一个容器中有若干的列表项。每个列表之间会有一些上下间距。这个间距我们常常会使用margin进行设置，例如：中国航天一往无前...Angelababy红毯从来没有失手过.box { border: 1px solid #999; ...继续阅读 (105)

byzhangxinxufromhttps://www.zhangxinxu.com/wordpress/?p=10815鑫空间-鑫生活本文欢迎分享与聚合，全文转载就不必了，尊重版权，圈子就这么大，若急用可以联系授权。一、生成WebM视频Web端基于图像素材生成webM格式的视频算是比较成熟的技术了，实现也比较简单。我之前是使用whammy.js实现的：https://github.com/antimatter15/whammy不过此项目已经多年不更新了，看看时间，七八年了。对于webP格式的图片序列，whammy会有黑屏的问题，因为21年的时候Chrome修改了 webp 图片的编码方法，从 WEBPVP8 改为了 WEBPVP8X，其并没有进行及时的更新。不过JPG或者PNG图片序列功能不受影响，大家如果想使用也是可以的。webm-writerw3c官方项目demo使用的是更新的 webm-writer.js，这个项目是基于 Whammy 实现的，比较新，最近更新是2年前。项目地址：https://github.com/thenickdude/webm-writer-js这里，我就使用webm-writer示意下如何使用纯JS在前端生成webM视频。您可以狠狠地点击这里：webm-writer.js实现webm视频合成并下载demo点击页面的“生成webM视频”按钮，就可以在下 ...继续阅读 (102)

byzhangxinxufromhttps://www.zhangxinxu.com/wordpress/?p=10830鑫空间-鑫生活本文欢迎分享与聚合，全文转载就不必了，尊重版权，圈子就这么大，若急用可以联系授权。一、回顾历史2015年的时候，我曾研究并撰写过一篇文章，“CSS或JS实现gif动态图片的停止与播放”，其中展示了各种技术实现 GIF 动图的播放控制。并在20年和21年陆续更新了使用libgif.js暂停gif，和使用 apng-js 暂停APNG。规范迭代，技术发展。时间来到了2023年，对于GIF动态的播放与暂停，又有了新的技术实现，且这一次的实现要更加简单，可以说，浏览器直接提供了原生的API，可以让我们对GIF图片的每一帧进行处理这个API就是ImageDecoder，属于 WebCodecs API中的一个细分API。下面就简单介绍下如何使用这个API解析GIF，并控制其暂停。二、解析GIF并暂停播放GIF本质上和视频一样，都是一帧一帧的图片拼合而成，所以，暂停GIF功能实现的要点，就是获取具体某一帧的资源。所以，事情其实很简单。使用ImageDecoder API解析GIF每一帧的图像资源；将该图像资源绘制在canvas画布上。1. 资源获取使用fetch方法即可。例如：fetch("by-zhangxinxu.gif").then((response) ...继续阅读 (106)

byzhangxinxufromhttps://www.zhangxinxu.com/wordpress/?p=10813鑫空间-鑫生活本文欢迎分享与聚合，全文转载就不必了，若急用可以联系授权。一、故事总要有背景的在朋友圈看到有人提到以后网站开发可以使用codeium，我的第一反应就是，莫非是那种一下子就整个Web网站都出来的人工智能产品？便去了解，结果……额……并不是我所想的这般，而是一个和GitHub Copilot功能极度类似的开发辅助工具。官网地址：https://codeium.com/目前已知优势我大致看了下，相比GitHub Copilot，Codeium有两个非常明显的优势：个人免费使用支持浏览器插件。例如可以直接在codepen、jsfiddle等
在线前端编辑器中体验AI代码提示的能力。下图所示的就是我在 codepen.io 中体验的代码生成能力示意图：这个很不错，Copilot使用还需要贡献自己的信用卡账号，且只能试用一两个月，相比之下，Codeium友好的多，安装好Chrome插件，然后就可以在浏览器中体验了。其他优势？虽然在使用上，codeium有着无可争议的优势，但是代码智能提示的能力呢，这个才是核心竞争力。我在官网找到了一个对比表格，大家可以看看：好家伙，看来Codeium自认为自己哪哪都比Copilot强，吹牛逼的见多了，这么吹的今年还是头一次见。 ...继续阅读 (115)

byzhangxinxufromhttps://www.zhangxinxu.com/wordpress/?p=10772鑫空间-鑫生活本文欢迎分享与聚合，全文转载就不必了，尊重版权，圈子就这么大，若急用可以联系授权。一、先说revert和@layer再展开介绍revert-layer关键字之前，大家需要先了解下revert全局关键字和@layer规则。revert关键字属性值可以让当前CSS属性使用浏览器默认的值（不同浏览器的表现可能会有差异）或者设置的某个祖先样式（看属性），通常我们会使用all: revert这个CSS声明让浏览器的UI控件还原成默认的样子。详见这篇文章介绍：“使用CSS revert全局关键字还原display显示元素”而@layer规则可以让里面的CSS规则降低一个层级，也是非常有用的特性，详见这篇文章介绍：“详解日后定会大规模使用的CSS @layer 规则”而revert-layer关键字的生效离不开@layer规则，同时又有revert关键字类似的行为表现，综合起来就是“层级恢复”。二、revert-layer的语法和作用revert-layer可以让CSS属性值还原为上一层@layer中设置的同属性值，如果当前CSS不在@layer规则中，或者没有祖先@layer规则，则表现类似于revert关键字，使用浏览器默认的控件样式。我们看三个案例，看看能 ...继续阅读 (115)

byzhangxinxufromhttps://www.zhangxinxu.com/wordpress/?p=10791鑫空间-鑫生活本文欢迎分享与聚合，全文转载就不必了，尊重版权，圈子就这么大，若急用可以联系授权。一、文字保护突发奇想突然奇想，写一段JS，让中文内容变得奇奇怪怪，就是读起来好像通常，但细细一看，错误百出这种。可以用来对文字内容进行保护。举个例子，文章内容不希望对方复制，很多人的做法是禁止右键，禁止选中，这个体验并不好。还有一些网站的做法是在复制内容最后加一段版权描述，代码示意：document.addEventListener('copy', function (event) { var clipboardData = event.clipboardData || window.clipboardData; if (!clipboardData) { return; } var text = window.getSelection().toString(); if (text) { event.preventDefault(); clipboardData.setData('text/plain', text + '\n\n鑫空间版权所有'); } })这些都是目前市面上比较流行的做法，但流 ...继续阅读 (109)

byzhangxinxufromhttps://www.zhangxinxu.com/wordpress/?p=10786鑫空间-鑫生活本文欢迎分享与聚合，全文转载就不必了，尊重版权，圈子就这么大，若急用可以联系授权。想了10个与CSS相关的书写案例，看看chatGPT的CSS代码水平如何，评估下自己会不会失业。一、开始啦，走起1. 圆角渐变按钮You23:14写一段CSS代码，蓝色渐变背景，圆角大小8px，高度40px，宽度120pxChatGPT23:14“`cssdiv {background: linear-gradient(to bottom, #007bff, #0088cc);border-radius: 8px;height: 40px;width: 120px;}“`解释：– `background` 属性定义背景颜色、图像或渐变。这里使用了 `linear-gradient()` 渐变函数，表示从顶部到底部使用蓝色线性渐变，颜色分别为 `#007bff` 和 `#0088cc`。– `border-radius` 属性可定义边框的圆角。这里设置为 `8px`，即8像素。– `height` 属性定义元素的高度，这里设置为 `40px`。– `width` 属性定义元素的宽度，这里设置为 `1 ...继续阅读 (112)

byzhangxinxufromhttps://www.zhangxinxu.com/wordpress/?p=10770鑫空间-鑫生活本文欢迎分享与聚合，全文转载就不必了，尊重版权，圈子就这么大，若急用可以联系授权。一、温故而知故元素重叠的经典方法就是绝对定位，偶尔也会使用margin负值定位，不展开，大家都懂的。然后前年我还介绍了另外一种元素重叠的方法，那就是使用grid布局进行重叠，详见文章：“使用grid-area等Grid布局属性轻松实现元素层叠效果”，这个方法非常好用。代码示意：上海钓鱼自然风景 by zhangxinxufigure { display: inline-grid; } figure > img, figure > figcaption { /* 还可以简写为 grid-area: 1 / 2 */ grid-area: 1 / 1 / 2 / 2; }效果如下所示，图片标题信息在图片上方显示了。然后，最近，我又发现了一个新的元素重叠方法，介绍给大家。二、container属性与元素重叠所有具体尺寸收缩特性的元素，设置为容器元素后，其宽度尺寸都会变成0。这些元素，包括任意的display计算值是inline-*的元素，浮动元素，绝对定位元素，flex子项，或者width宽度值设置fit-content的元素。例如：.element ...继续阅读 (111)

byzhangxinxufromhttps://www.zhangxinxu.com/wordpress/?p=10764鑫空间-鑫生活本文欢迎分享与聚合，全文转载就不必了，尊重版权，圈子就这么大，若急用可以联系授权。一、现在的小朋友不知道的历史别看现在Flex布局、Grid布局玩得飞起，在过去，时间也不远，也就五六年前，你要想在生产环境弄一个两端对齐的列表布局效果，不容易的。原因无他，在CSS2.1规范下，是没有专门的布局属性的（除了Table布局），你要想让列表两端对齐，只能使用其他CSS属性模拟。比方说使用display:inline-block外加text-align:justify声明进行模拟。text-align:justify可以让内联元素两端对齐，所以，只需要将列表元素设置为具有内联特性（任意的display:inline-*属性），就可以进行模拟，我之前专门撰文介绍过。不过，这种方法有个缺陷，就是最后一行元素是无法两端对齐的（两端对齐的条件就是超过一行）：不过好在有个CSS属性可以专门解决这个问题，这个CSS属性就是text-align-last，专门设置最后一行内联元素的排列方式。此属性很神奇，IE6浏览器也是支持的，IE6浏览器啊，这个浏览器出来的时候，想必很多人还没出生吧，古董中的古董，居然也支持！本以为接下来是康庄大道，谁知遇到个专门下绊子了坑爹玩意，Sa ...继续阅读 (98)

byzhangxinxufromhttps://www.zhangxinxu.com/wordpress/?p=10719鑫空间-鑫生活本文欢迎分享与聚合，全文转载就不必了，尊重版权，圈子就这么大，若急用可以联系授权。在一些在线的脑图或者流程图示意的工具中，使用曲线连接两个模块是非常常见的效果，例如figma里面的figjam。figjam是我用过体验非常赞的一个工具，衡量自己Web前端技术的一个简单办法就是，如果让你实现这样一个产品，你能否立刻在脑中形成实现方案，并完成之。我就想过这个问题，如果我来实现figjam，我能行吗？突然意识到非常不确定，所谓不确定，就是还需要摸索，对能否完成，以及完成所需的时间模糊，换言之，就还是技术积累不够。机会总是留给有准备的人的，既然自己决定深耕于交互体验领域，就必须将自己的技术缺漏补上。如何补，很简单，聚沙成塔，也就是从一个一个的小功能的实现开始积累。所以，我决定先研究下给任意两个点，这两个点使用贝塞尔曲线连接该如何实现。一、任意两点之间的曲线需求为：给定起点和终点，然后自动得到曲线说到曲线，在计算机图形领域，一定离不开“贝塞尔曲线”，之前我有专门介绍过“深度掌握SVG路径path的贝塞尔曲线指令”。如果你使用过PS中的钢笔工具绘制过曲线，那么对里面提到的“控制点”也应该非常熟悉，基本上，脑中只要想一下起止点和控制点，曲线什么样子脑中就自动出现 ...继续阅读 (115)

byzhangxinxufromhttps://www.zhangxinxu.com/wordpress/?p=10728鑫空间-鑫生活本文欢迎分享与聚合，全文转载就不必了，尊重版权，圈子就这么大，若急用可以联系授权。今天打开caniuse查了下，几个全新的颜色函数Chrome浏览器也支持了，这可是为数不多的落后Safari浏览器支持数年（2023年 vs 2021年）的CSS新特性了。与此同时，Firefox浏览器也已经开启“实验支持”，说明这几个颜色函数被所有现代浏览器支持已经是板上钉钉的事情了，这就意味着时机成熟，可以好好介绍这几个全新的CSS颜色函数了。一、最先支持的hwb()色值hwb()色值是这批颜色函数（CSS Level 4 Color Module）中最早支持的，兼容性如下图所示：HWB颜色模型是RGB颜色模型中点的圆柱坐标表示，类似于HSL和HSV。它是由HSV的创建者阿尔维·雷·史密斯于1996年开发的，以解决HSV的一些问题，相对而言，HWB对人类而言要更加直观，计算速度也更快一些。此颜色模型使用的时候先选择一个主色，然后再和白色和（或）黑色“混合”以产生所需的颜色。其中，第一个坐标H（色调）与HSL和HSV中的色调坐标相同，而后面的W和B分别代表白度和黑度，范围为0–100%（或0–1）。下图示意的就是不同H、W、B值下的色块显示图。由于HWB更符合人类的 ...继续阅读 (107)