前端图像处理
文章平均质量分 97
前端江湖
前端
展开
-
微信小程序图片裁剪功能的实现
本文详细讲述了在小程序中实现一个图片裁剪功能的过程,可以看出和在浏览器Web端的实现差别并不大。在核心的图片适配、裁剪框绘制与缩放事件处理上,基本两边可以通用,在小程序中的实现逻辑可以完整在移到web浏览器上,反之亦然。区别可能只只在于图片的加载和保存上,可以使用小程序提供的多种内置接口方法,能教方便的完成。原创 2023-03-08 18:20:09 · 9985 阅读 · 1 评论 -
一步步实现前端图片裁剪功能
本文基于前端JS和H5,从图片上传加载、裁剪框的展示、拖动缩放到canvas图片裁剪、显示新图片等,实现一个完整的图片裁剪功能原创 2022-11-02 14:44:53 · 4781 阅读 · 0 评论 -
详解前端二进制:Blob、File、FileReader、ArrayBuffer、TypeArray、DataView
本文将介绍一些前端二进制数据处理相关的API知识,如Blob、File、FileReader、ArrayBuffer、TypeArray、DataView等等。原创 2022-10-31 17:34:13 · 5041 阅读 · 0 评论 -
Web前端实现一个图片放大镜
基本完成了一个可以非固定尺寸、动态加载图片的放大镜功能。动态加载图片,可以不用考虑图片的像素宽高,任意尺寸的图片都可以完整放大,缩略小图和预览大图也可以是同一张图片。原创 2022-12-06 10:30:33 · 3270 阅读 · 0 评论 -
前端JS获取图片文件的真实格式
浏览器支持的图片格式中,除了svg以外,其他几种位图格式,都可以较好的通过读取图像二进制数据的方式判断出图片文件的真实格式,能够防止文件伪造绕开判断,造成不必要的异常等问题。原创 2022-11-17 16:21:22 · 4030 阅读 · 0 评论 -
Javascript中的图像数据对象:Image、ImageData 和 ImageBitmap
前端处理图片数据,有几个常用的API,如Image、ImageData、ImageBitmap等。这些对象可以为我们操作图片带来较大帮助,方便我们更好的利用JavaScript来加载图像资源,并控制图像像素点,进行一些处理操作。原创 2023-01-16 10:06:50 · 12307 阅读 · 0 评论 -
图片基础知识与浏览器支持的图片格式
图片作为互联网上的一种媒体展示资源,在主流浏览器上已经支持的格式,目前一般有7种:jpg、png、gif、svg、bmp、ico、webp。了解一些图片基础知识,对我们的开发工作也会有比较大的帮助。原创 2022-11-15 13:35:18 · 2286 阅读 · 2 评论 -
web前端文件上传可选择的4种方式
本文总结了前端web当前能够添加读取文件的4种方式,如果我们需要开发一个比较完善的图片上传组件,那么可能需要点击、拖拽、粘贴多种功能,这就需要使用到前三种文件读取方式。文件系统访问API鉴于兼容性还有待提升,我们可以作为后备的方案使用。有了文件读取的方式,那我们要完成上传功能,就可以使用HTML表单提交,或者FormData对象上传了。原创 2022-11-23 10:00:31 · 12194 阅读 · 0 评论 -
前端需要搞懂的字符编码ASCII、Unicode、UTF8、UTF16等
在前端开发中,Javascript程序是使用Unicode字符集,Javascript源码文本通常是基于UTF-8编码。但js代码中的字符串类型是UTF-16编码的,这也是为什么会碰到api接口返回字符串在前端出现乱码,因为多数服务都使用utf-8编码,前后编码方式不一致。...原创 2022-06-22 09:45:37 · 3191 阅读 · 0 评论 -
如何快速实现一个颜色选择器
目录颜色模型HSV 与 HSL 的区别实现选择器色相计算色相柱的滑块位置饱和度和明亮度计算这两个值hsv转rgb透明度基于HSL的颜色选择器使用canvas设置面板在做前端界面开发的时候,遇到需要改变颜色的需求,就需要使用颜色选择器。针对这个问题,第一想法,自然是H5提供了input color,可以实现。但不出意外的,IE并不支持。而且,chrome的实现方式和firefox也不太一样,见下图:左图是chrome的,浏览器自身实现的一个颜色选择器控件原创 2022-01-21 10:12:50 · 2406 阅读 · 0 评论 -
深入理解Base64字符串编码知识
Base64是一种索引编码,每个字符都对应一个索引,具体的关系图,如下:这也是名称中64的由来。将二进制数据转为字符串(ASCII码),方便数据传输。浏览器能直接展示Base64编码图片,减少请求。原创 2022-08-15 12:10:59 · 1797 阅读 · 0 评论 -
前端需要了解的颜色模型,RGB、HSL和HSV
颜色模型,是用来表示颜色的数学模型。比如最常见的 RGB模型,使用红绿蓝三色来表示颜色。一般的颜色模型,RGB,HSL,HSV(B),HSI...原创 2021-11-05 09:57:59 · 5539 阅读 · 0 评论 -
JS图片对象转换函数(File\DataURL\ObjectURL\Image\Canvas)
前端开发中图片类对象,常会在 File、Image、Canvas 、DataURL(Base64)、ObjectURL(BlobURL)、Blob、ImageBitmap之间展开。本文将提炼出前端图像文件操作中存在的各个对象之间的转换方法,而通过不同的形式加载不同的图像资源,有助于我们展示图片或者处理图像数据。原创 2023-02-07 11:10:36 · 2432 阅读 · 0 评论