文章关键字 ‘canvas’

JS audio加图片序列或canvas转webM/MP4的实现

2023年05月21日,星期日

视频合成封面图

本文算是目前国内关于浏览器音视频合成,尤其WebCodecs API进行视频合成这块比较稀缺的内容了。

阅读全文…

使用ImageDecoder API让GIF图片暂停播放

2023年05月7日,星期日

占位图,头图,封面图

ImageDecoder是浏览器支持的原生API,可以对GIF动图进行逐帧解析渲染,播放控制,图像处理,水印添加等,都不在话下。

阅读全文…

任意两个点的曲线连接JS算法

2023年02月27日,星期一

canvas 曲线

突发奇想给自己想了个需求, 抽时间研究并实现了下,作为日后的技术储备,等待厚积薄发。

阅读全文…

前端原生API实现条形码二维码的JS解析识别

2023年01月7日,星期六

qrcode封面图

今天才知道,原来浏览器有原生的API,可以对二维码、条形码进行解析,使用非常简单!

阅读全文…

兼容IE浏览器的图片局部高斯模糊实现

2021年09月30日,星期四

局部模糊占位图

CSS实现高斯模糊很方便,但是如果要兼容IE怎么办,如果希望局部模糊怎么办,如果希望模糊的图像有合成能力怎么办,此时,还是得借助 canvas,本文就深入介绍如何使用 canvas 实现带羽化的局部模糊效果。

阅读全文…

APNG在线制作、兼容、播放和暂停

2021年09月12日,星期日

APNG占位图

APNG用起来还是挺爽的,整体来看,要比CSS动画+图片序列实现动画要更好,本文就基于实际开发经验,把如何控制APNG,使用注意事项等,通过文字描述加演示告知大家,让大家可以快速上手使用。

阅读全文…

JS判断图像背景颜色单一还是丰富

2021年06月27日,星期日

图像相似度占位

最近接到一个需求,需要判断图片是不是视觉上颜色看起来相似,还是色彩丰富,一番尝试下来,最终效果还不错,已开源,有demo,相信可以帮到大家。

阅读全文…

腾讯开源的酷炫动画播放解决方案Vap初体验

2021年04月18日,星期日

腾讯vap

H5中希望有炫酷3D动效,但是3D WebGL实力不允许,可以试试使用本文要介绍的VAP,导出PNG图片序列,可以有高性能的炫酷动画效果,Android和iOS也可以使用。

阅读全文…

借助ffmpeg.wasm纯前端实现多音频和视频的合成

2021年03月20日,星期六

熊猫 合体

不借助C/C++,纯JS浏览器中ffmpeg.wasm实现指定长度、位置和数量的音频和视频合并成新的视频,此领域目前为数不多优质文章,建议收藏备忘。

阅读全文…

3D LUT 滤镜颜色映射原理剖析与JS实现

2020年02月27日,星期四

关于3D LUT滤镜原理的资料很少,或者原理讲得根本就不清楚,里面的一串数字怎么变成颜色的开发者全然不知,本文就通过真实例子一步一步带你剖析RGB色值是如何通过Cube等滤镜变成另外的颜色的。

阅读全文…