- 博客(37)
- 问答 (1)
- 收藏
- 关注
RSS订阅原创 将登记照图片尺寸宽高文件大小进行调整修改的工具
通过该这种登记照宽高、尺寸、背景色、文件大小在线智能调整工具，可以轻松将登记照图片文件的各种参数修改为符合用户需求的值：
2023-04-18 17:24:20
139
原创 icon图标在线制作生成的方法
我们在实际的建站过程中，经常需要制作自己的icon图标文件；又或者我们需要把windows系统里的应用图标改成自定义的图标样式，那么有什么办法能够快速的将一张普通图片经过裁剪等操作后，制作生成一张icon图标文件呢，参考这里。
2023-02-18 18:14:23
635
原创 怎样快速压缩GIF体积大小
最近找到一个功能比较全，并且压缩效果挺好的在线GIF压缩工具，他的特色在于是纯前端处理，也就是在用户的浏览器中进行处理，不需要把用户的GIF上传到对方服务器上，从而极大的保护了用户的隐私，并且他的智能模式确实很好用，你只要输入你期望压缩后的大小，他就能帮你自动搞定了。不过因为是在用户的浏览器中处理，因此用户电脑的配置和浏览器版本是对压缩有一定的影响的，比如有的电脑CPU和内存配置比较低，就可能导致一直卡住无法完成压缩流程等等问题，但是在配置好的电脑上，几乎是瞬间就能将GIF图压缩90%以上的体积大小。...
2022-08-17 16:37:30
261
原创 如何给证件照换一个背景颜色
所以通过前端实现了一个改变证件照背景颜色的方法。该功能是通过纯前端js完成的，通过操控CANVAS画布中的每个像素点来实现更换背景色，因此该方法并没有用到专业的图像处理或者机器学习方法来进行，因为是纯前端处理，引入太复杂的框架反而不利于用户加载访问速度，而且纯前端处理，在绝大部分情况下的效率还是挺高的！主要是利用了CANVAS的getImageData方法，来获取每个像素点的信息，并且通过该信息来获取每个像素点的R/G/B/A四个色彩通道的数值大小，最终进行比较和替换，再加之一定的优化算法辅助。...
2022-07-28 16:40:34
911
1
原创 怎样修改证件照的尺寸大小，让照片符合报名要求
在我们考试进行报名的时候，经常需要将自己的照片尺寸进行修改，例如宽高进行放大或者缩小，并调整照片的KB体积大小。第一点，因为我们在照相馆之类的地方拍的证件照的电子版的宽高尺寸很大，照片体积也很大，所以很清晰；但是考试报名的时候要求登记照必须很小，宽高一般只有几百px左右，体积一般要求不大于200KB等等。第二点，全国各种考试报名对于照片的尺寸和体积都没有统一的要求，因此不同的考试或者不同的部门要求的照片尺寸都完全不同。那么我们怎样将自己的一寸登记照修改成两寸，或者将两寸的登记照缩小成一寸的大小等等呢。...
2022-07-25 16:43:23
1247
原创 照片一寸改成二寸，并压缩体积KB的工具
在我们进行考试报名之类的时候，经常需要将自己的照片修改尺寸，进行放大或者缩小，并调整照片的体积大小。那么为什么我们经常需要调整照片的尺寸呢？第一点，因为我们在照相馆之类的地方拍的证件照的电子版的宽高尺寸很大，照片体积也很大，所以很清晰；但是考试报名的时候要求登记照必须很小，宽高一般只有几百px左右，体积一般要求不大于200KB等等。第二点，全国各种考试报名对于照片的尺寸和体积都没有统一的要求，因此不同的考试或者不同的部门要求的照片尺寸都完全不同。以上两点理由导致我们需要频繁的修改自己照片的尺寸。那么我们怎样
2022-07-04 10:43:05
659
原创 纯前端实现登记照压缩宽高体积大小和换装功能
感觉目前绝大部分的登记照制作网站和APP们，都是通过把图片传输到后台来进行图片的各种处理的。但实际上这样非常消耗服务端的各种资源，并且对于服务端的网络带宽也带来很大压力。其实在前端使用canvas实现也有很好的效果，并且对于服务器的资源完全没有耗费。 通过canvas可以改变登记照缩放之后的宽度、高度，并且我们可以通过canvas.todataUrl方法对图片进行质量压缩，可以设置不同的压缩程度。 登记照换装是通过在canvas上进行画图叠加来实现的。然后我们可以任意选择一个装扮，并且通过对装扮进行移动和缩
2022-06-27 10:52:08
336
原创 证件照修改宽高和体积的工具
平时我们在进行考试报名的时候，都需要上传自己的证件照，但是基本上每种不同的考试，对于上传的证件照都有不同的要求，比如教资考试要求证件照必须是一寸的，也就是宽度295px，高度413px的照片，并且证件照文件的体积一般是要小于180kb大小的。但是我们用手机或者照相馆拍摄的证件照文件，一般都是体积很大的，宽高甚至达到好几千像素。此时想要很方便的缩小证件照的宽高和体积，来符合报名的要求，就不是那么容易，毕竟PS并不是每个人都会安装和使用的。最近在网上发现了一个修改证件照宽高以及体积大小的工具，这个工具专门设计为
2022-06-20 09:54:19
218
原创 怎么把照片精确压缩到固定KB体积大小
将照片压缩到某一个KB大小或者某一个MB大小，听起来是一个简单的需求，但实际上当我们开始实现它时，我们就会发现，从哪里开始呢？ 用什么工具最方便？ 如果我想将图像精确压缩到指定大小，例如我们想要把一张500KB的jpg格式照片指定压缩到100kb大小，我应该尝试什么？ 你要下载ps软件还是xx秀秀什么的？顿时把所有人都难住了。而网上的几乎所有图片压缩工具，都无法直接指定图片压缩后的KB大小，它们都是只能设置压缩后的宽高、清晰度等等参数，至于压缩之后图片文件到底是多少KB大小没人知道，只能一次次摸索尝试。
2022-05-27 15:56:00
1181
原创 怎样把ICO图标改成圆形的？
首先我们知道图片一般都是矩形的，如果想要一个圆形的图片，那么就要把矩形图片里面圆形之外的部分的背景弄成透明的，那么就变成了一个真正的圆形图，因为只有圆里面有画面，四周都是透明的。那么就需要用到工具，将一张普通的图片制作成背景透明的圆形图片，首先使用圆形图片生成工具，来把普通的图片或者图标转换成圆形的：圆形图片生成器,照片制作圆图工具https://www.butterpig.top/imgcircle制作好了保存之后大家可以点击打开看一下，是一张圆形的图片。此时就拥有了把圆形图制作成圆形ico图标的
2022-05-26 15:43:55
2063
原创 VUE单页面应用的内页很难被百度收录
这两年自己写了几个WEB项目，前端都是用的vue框架，后台大部分用的nodejs，也有用的spring的；但是他们有一个共同点：都是SPA单页面应用，并且使用HEXO框架在二级目录搭建了一个静态博客。主要表现是vue应用收录了首页，而二级页面却不被收录，但是！！！重点来了，hexo搭建在二级目录的博客文章是有小部分可以被收录的，所以我觉得问题其实还是出在vue单页应用上面，百度很难收录这种单页面应用的内页，而这几个web项目在谷歌和必应的收录状况是非常好的，可能他们技术比较好，不在乎你的数据是不是aja
2022-05-26 11:37:37
3563
2
原创 前端实现中文摩斯码制作翻译工具
摩斯密码全称摩尔斯电码，是由M国人摩尔斯在1837年发明。从外表来看，它是由点dot（.）划dash（-）这两种符号所组成的一组时通时断的字符串。摩尔斯码在早期的无线电上作用是非常大的，它是每个无线电通讯者所须必知的。由于它所占的频宽最少，同时又具有一种技术及艺术的特性，所以在实际的生活当中就有着广泛的应用。因为最近受到一些有才网友的启发，发现用摩斯码来发送一些私密消息很有趣，所以在纯前端实现了这款摩斯密码制作翻译工具，它可以轻松高效的实现在线的摩斯密码制作与翻译，最关键的是它支持中文摩斯码，这就大大扩
2021-12-29 09:15:21
801
原创 前端实现ICON图标生成器
如上图所示，是在网站上使用纯前端代码实现的一个图片转换ico图标的在线工具，所谓纯前端也就是说他没有把用户上传的图片传输到后台服务器进行处理，然后再发送回前端。而是全部直接在前端对用户上传的图片进行裁剪、缩放、格式转换等等，最终产生符合要求的ico图标文件，并让用户进行下载。在线icon图标生成器https://www.butterpig.top/icopro/那么左边的裁剪框是使用了开源的vue-cropper组件制作的，应该是是相当方便了，不过里面也不是完全没坑，还是有一点点bug的。vue-...
2021-12-16 15:21:37
1480
原创 怎样将图片制作转换圆形图片
近期在网上看到一些将普通的矩形图片转换生成圆形图片的需求。说明一下这里所说的圆形图片是指的类似网络头像的那种正圆形，而不是说图片的四个角是圆弧形，是一个完全正圆形的图片。因此就想着自己实现一下这个生成圆形图片的功能发布到自己网站上。这个功能的实际页面效果如下所示：总而言之，这个功能用起来完全不复杂，也没有任何用户参数选项啥的，只需要选择上传一张图片就可以制作完成了。并且导出的圆图是直接对上传的原图进行裁剪的，所以画质不会有任何损失，裁剪之后的尺寸和你的选择框大小有关，如果你的选择框和原图一样大，也就
2021-12-10 15:20:32
2624
原创 怎样将jpg、png制作成windows桌面ico图标文件
之前在前端设计实现了一个生成ico图标的功能，然而后来经过用户的反馈才发现，之前生成的ico图标的编码格式，其实只能在网站等地方使用，如果在windows桌面上使用，就会提示找不到ico图标文件，错误提示如下所示。这个错误确实是百思不得其解，我以为只要图片的后缀是ico的，windows系统就能够认可，然而事实是，windows的桌面ico对它内部的编码格式是有很严格要求的。也就是说，windows桌面图标使用的ico文件，不是从png或者jpg直接演化而来的。因此从网上找到了一个思路，也就是.
2021-12-08 16:05:04
13093
2
原创 如何快速将大图片压缩到指定的KB大小
生活中，我们使用手机或者单反拍出来的照片文件的大小，经常让人感到可怕，一张照片几兆都算小的了，经常都是十多兆，几十兆那种。然而尺寸这么大的照片，无论是想要发送给其他人观赏，还是上传到一些网站里，都会因为尺寸太大而存在很多困扰。比如对于某些网站上传图片的大小限制，发送图片时的大小限制等等问题。很多人可能想到可以使用photoshop等等app来解决问题。然而实际情况是很麻烦，因为还要下载安装，一个ps软件好多个G的大小，下载完了之后还要注册，或者要续费等等。就算上面的步骤都弄好了，那么复杂的专业软件界面，也让
2021-11-16 22:43:25
3348
原创 怎样在线将图片制作成圆角图样式
生活中我们常见的图片或者照片，绝大部分都是矩形的角，也就是说它的四个角是九十度直角的。但是在一些特殊的情况下，我们想要把直角的图片转换成圆角的，也就是把图片的四个角打磨成圆弧形状的，并且圆弧的大小还需要根据实际的应用场景来改变。最典型的案例就是我们手机上各种app的图标了，它们就都是圆角的图片，这样视觉效果显得更好看一些，甚至更有立体感，符合现代人的审美观。可是在大多数情况下，我们都是很难实现图片转圆角这个操作的，主要因为我们不知道从何入手。我们通常首先想到的一般都是使用photoshop之类的P图软件
2021-11-11 15:06:15
2295
原创 纯前端JS实现一个登记照改换底色背景色功能
说到登记照改换底色功能的实现，我想大部分人都会认为使用opencv或者机器学习方法对图像进行图像分割、边缘检测、基于语义的物体检测、无监督的像素分类算法等等算法是最好的途径。而我最近实现了一个登记照改换底色的小工具，可以任意设置登记照的底色，不局限于蓝白红三种最基本的登记照背景颜色。并且它可以根据实际情况来调整背景的色彩、亮度等等，可以让修改底色之后的登记照显得更真实些。最关键的是，他是纯前端js完成的，是通过操控canvas中的像素点来实现换底色的，并没有用到专业的图像处理或者机器学习方法来进行，
2021-11-08 15:12:28
2642
1
原创 怎样在线将图片转换成icon图标
很久之前开发过一个图片转换ico的功能，用的人还不少，但是感觉功能配置太简易，用起来不那么得心应手，而且界面显得有点low，所以有制作了一个在线图片转ico图标pro加强版，功能更加强大，界面交互能力增强了不少。首先上地址大家体验一下：在线图片转换ICO图标专业版,图片裁剪转ICO图标工具https://www.butterpig.top/icopro/现在这个加强版的界面可以说人性化得多，预览效果也更强了。并且还能实时的对图片进行缩放裁剪，并且也能实时预览。而且现在可以连续的拖动图片添加到上传
2021-10-20 18:21:18
3905
原创 网上提交材料时让登记照瞬间符合审核尺寸要求的小工具
我们经常会遇到需要在网上提交上传自己登记照的情形，比如考试报名、业务办理、注册登记等等。通常情况下，这些网页或者说系统对上传照片的宽高尺寸和照片的文件大小都有非常严格的限制，不然用户上传的照片要是太大，对网络会造成负担，服务提供方的服务器成本压力也会剧增。但是这样一来就把难题抛给了用户。想考试报个名，想上传个证书啥的，还得自己想办法把照片给调整到限定的尺寸大小。然而大部分人并不会使用专业的图片处理软件，虽然像美图这类手机app可以实现，但是转换的步骤也并不简单，甚至可以说是有些投机取巧。所以最近在自
2021-09-13 18:06:09
217
原创 在线的图片颗粒化效果实现
图片颗粒化也可以称作图片粒子化或者图片像素化。其原理即通过一定的规则来提取图片中的像素点，从而得到了所需图像或者文字内容的具体坐标，然后按照规则将它们形象地用一个个的粒子进行表示，从而使图片呈现出抽象化的观赏效果。 一般用于制作社交头像和颗粒文字，颗粒化之后的图片，具有很强的艺术效果。 （哈哈这是从我的网站复制粘贴的一套说辞）。最近在自己的网站butterPig上又实现了一个小功能，也就是图片的颗粒化，也可以叫做图片粒子化等等，随意叫就行啦。总之就是把图片和文字之类的，转换成很多小颗粒组成，还挺好看的。
2021-09-05 22:48:02
692
原创 小白最初学习使用phaser3的细节归纳，避坑指南 - phaser系列教程
phaser刚开始学的时候，还是模模糊糊走了些弯路的，虽然一开始想的是，跟着官网的步骤来就肯定没事，结果官网的坑也是有的。所以把自己学习phaser3时候遇到的一些小坑分享一下，让大家可以借鉴一下。phaser有2版本和3版本，api区别挺大一开始还真不知道phaser有两个版本，并且两个版本的api区别还挺大，所以基本上2版本的实例，对于3版本而言，仅仅只有一些参考意义，权当作引子了。另外，官网上只有phaser2的api文档，想要看phaser3的api文档，要去github上面去看，并且也
2021-04-13 09:44:55
2420
原创 为什么最终选择使用phaser来开发小游戏 - phaser系列教程
最近想利用空余时间学习一下游戏开发方面的知识。对于一个从没有接触过游戏开发的小白，连到底有哪些游戏开发框架或者引擎都不是很清楚，只知道名气最大的unity3D，还有比较古老的cocos2dx。但是unity3D似乎更适合于专业团队，开发大型游戏使用。我的想法是自己弄一点小游戏玩玩，所以unity3D的学习成本，对我而言可能比较高，意义不大。cocos2dx总感觉过于古老似的。后来在网上多方搜索，最后发现cocos creator和phaser是两种比较热门的游戏框架。cocos creator是国内中文的，
2021-04-13 09:42:08
2297
原创 在网页中引入无后端的valine评论系统，使用leancloud作为免费存储和评论管理
首先引用官网的介绍：Valine 诞生于2017年8月7日，是一款基于LeanCloud的快速、简洁且高效的无后端评论系统。理论上支持但不限于静态博客，目前已有Hexo、Jekyll、Typecho、Hugo、Ghost 等博客程序在使用Valine。官方地址。相信这对于很多不想自己搭建评论系统后台的人而言，是很有诱惑力的。然而类似的社会化评论系统也不少，国内以前有一些评论系统比如友言之类的，都因为变现困难等原因倒闭了。目前用户使用比较多的一般是畅言和来必力这俩，一开始我也想用这两家的评论系统，然而经过一
2021-03-19 17:12:53
903
原创 前端代码实现的一个消除类型的图片滑滑乐小游戏分享
最近在个人网站butterpig实现了一个像素消除类型的小游戏，在移动端和PC端都可以玩。我给取名叫‘图片滑滑乐’O(∩_∩)O哈哈~游戏的最开始，将图片持续抽象为'巨大'的像素点，这时候屏幕上只有这一个超大的像素。然后我们通过不断的在区域内滑动， 让'巨大'的像素点不断的分解为更小的像素点。凡是我们滑到的大圆，都会分解成几个更小的圆，也就是更小的像素。然后我们不断的滑啊滑、滑啊滑，像素点分解得越来越小，越来越密集，图片也越发的清晰。游戏的链接给大家：图片滑滑乐说实话，不停的
2021-03-12 16:29:45
208
4
原创 使用cdn来加速字体文件在前端的加载速度，并监听字体是否加载完成
最近在个人网站butterpig中实现了个性印章的在线设计功能，里面目前一共实现了有八九种个性印章的样式，并且还有六七种网络开源商用的字体类型。具体效果可以访问：个性印章在线设计查看。印章的设计，其实原理非常简单，主要就是通过canvas画图技术。而且画的内容也非常简单基础，因此不在这里具体说明。该功能的难点在于如何在前端加载第三方字体文件。众所周知，字体文件的格式一般有.ttf和.woff等，由于中文和英文的差异性，导致中文字体包的大小一般都比较大，一般都有好几M，更有几十M几百M的字体包文件
2021-03-06 20:21:24
1857
原创 使用h5中canvas画圆角矩形，生成透明圆角图片
最近在个人网站butterpig实现了图片一键转换圆角功能，该功能的实现主要用到了html5中的canvas绘图技术。首先，实现效果如下：为了实现该功能，首先我们要生成一个透明底色的空内容的canvas，然后获取到canvas的context对象，通过对象的arc()和lineTo()方法来画出一个圆角的矩形，部分代码如下：ctx.beginPath();ctx.arc(width-radius, height-radius, radius, 0, Math.PI/2);ctx.lin
2021-03-02 10:38:23
1113
原创 用html5中canvas实现一个微信零钱余额生成器
最近在网上看到一些小站有微信零钱金额生成和支付宝资产生成的功能，感觉娱乐性挺强的，而且说实话做得好，是完全能够以假乱真的。所以也在自己的网站butterpig上实现了一下，先放上该功能的地址微信零钱生成工具，炫富装B神器。实际效果如图：在网页预览的时候，显示的是一个<img标签和一个浮在其上的文本框。该文本框和下方的资产金额的<input是数据绑定的。因此可以在微信零钱余额位置即时显示出我们输入的数值。然而真正实现，是通过一个隐藏的canvas，将原始图片渲染到canvas中，然后再
2021-03-01 12:21:38
2055
1
原创 使用前端js代码开发了一个图片转ico图标的功能
最近给自己的个人图像处理网站butterpig又新增加了一个在线的图片转ico功能，也是一键生成傻瓜式操作。那么我们为什么需要favicon.ico图标呢？首先，favicon即为favorites icon的缩写。 顾名思义，其代表了网站特有的主题形象标签， ico图标显示在浏览器标签页、收藏夹、地址栏等显要位置,让用户以图标的方式区别不同的网站。 因此，为网站打造一个独一无二的ico图标是网站走向成功的第一步。其实该功能的主要原理，也就是将用户上传的各种格式图像，渲染到html中的ca.
2021-02-23 10:11:50
1656
2
原创 前端js实现的图片在线压缩功能
在我们的日常生活与工作中，经常遇到需要在各类网站中填写资料进行上传审核的场景，其中免不了要按照各种要求对照片进行裁剪压缩等。例如某网站要求上传登记照的宽度要小于200像素，高度要小于400像素，照片大小要小于500Kb等。这时候我们就要想尽办法，尝试各种APP将图片进行修改，以图达到最终要求。对于没有P图经验的人而言，这是个痛苦而且繁琐的任务。因此现在实现一种可以在前端一键生成符合不同审核规定照片的功能，他的实质是使用算法，将照片按照规则进行压缩。首先该功能的地址是图片在线一键压缩下面介绍如何帮助.##
2021-02-18 21:32:45
726
原创 前端实现的一组印章在线设计生成工具集，支持高清镂空的印章图片生成下载
最近做了一个在线印章设计的工具butterpig，是我的个人网站butterpig网站里面的功能之一。该在线工具是一款功能丰富的在线印章设计工具集butterpig，能够实现印章中每个部份的完全分离，从而对每个细节进行独立的精细调整。 这里给大家介绍一下用法和效果，个人感觉效果挺精细的。##module1第一部分是位于印章的顶部文字，公司名称填写的部分。其中我们可以在输入了公司名称后，通过下方相对应的按钮，来调整公司名称文字的位置，大小，字间距，以及还可以关闭公司名称的显示。...
2021-02-18 18:01:22
4426
2
空空如也
json输入较长字符串时，怎么让字符串变多行，而不是都写在一行中。
2017-09-08
TA创建的收藏夹 TA关注的收藏夹
TA关注的人