文章关键字 ‘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等滤镜变成另外的颜色的。

阅读全文…

CSS滤镜和混合模式处理的图片如何上传下载?

2019年04月20日,星期六

CSS处理图形合成真图像

使用CSS滤镜和混合模式可以实现很多很酷的图像处理效果,但是处理后的美图用户无法下载,也无法上传,因为此时的图片资源还是原图,有没有什么方法可以得到CSS技术处理后的图像呢?

阅读全文…

使用wavesurfer.js显示mp3 audio音频的波形图

2018年12月9日,星期日

波形图

如果你想实现右图所示的波形图效果,可以借助wavesurfer.js。wavesurfer.js上手简单,扩展丰富,有多达35个可选参数,什么音频速率控制,波形图大小尺寸啊,都完全不在话下。还有好多种方法,对了,还有很多额外的插件,丰富的使用案例。

基本上,你要想对音频进行解析,显示个图形啥的,不要多想了,就wavesurfer,童叟无欺,老少皆宜,居家旅行,开发必备。

阅读全文…

CSS届的绘图板CSS Paint API简介

2018年11月26日,星期一

CSS Paint API绘制

本文介绍CSS Paint API,CSS Paint API是CSS Houdini的一部分,是目前应用比较多的API之一,其是做什么用的呢?有什么好处呢?本文就将通过一个简单的案例,带你快速了解CSS Paint API,本文属于前端技术广度方面的学习,博闻强识。

阅读全文…