响应微博小秘书倡议 连夜加急撸出头像变灰小工具之开发历程

昨天看到了微博小秘书关于全国性悼念活动倡议,我非常支持这个倡议。 因为修改灰色头像会有一定技术门槛,于是思考能否开发一个小工具方便大家使用。 考虑到第二天就是哀悼日,准备夜间快速开发上线。

0X00 废话少说先上东西

有兴趣的老哥可以访问:http://smartding.top:81/ 或者 http://smartding.top:8080/

因为暂时无法备案,所以只能采用带端口或者纯 IP 的方式访问,有点郁闷。

小工具里面记录了项目历程,有兴趣可以阅读,

0X01 选型

因为时间相当有限,技术选型必须选择较为成熟的脚手架型框架。

基于这样的原则出发,前端框选用 Element.io,Element.io 优势是支持 CDN 引用,你甚至不需要创建一个 Webpack 项目,提供的组件既有颜值也非常稳定可靠,文档也十分齐全。后端框架则采用 Springboot,通过简单引入 Springboot 依赖就可以轻松创建一个 Java web 项目。

0X02 核心算法

技术选型完成之后,开始考虑核心算法也就是如何把彩色图片转为灰度图片。我没有图片处理经验,但经过摸索大致了解了转换方法。转换算法其实就是下面的数学公式:

gray(red, green, blue)  = (red + green + blue)/3

主要思路是把求得每个像素的RGB 三色平均值,如此把三维的颜色空间映射到一维的灰度空间。通过逐一转换图片的每一个像素,最终我们得到一副只包含灰度的图片。

具体实现如下:

        int width = img.getWidth();
        int height = img.getHeight();

        for (int i = 0; i < height; i++) {

            for (int j = 0; j < width; j++) {

                int p = img.getRGB(j, i);

                int a = (p >> 24) & 0xff;
                int r = (p >> 16) & 0xff;
                int g = (p >> 8) & 0xff;
                int b = p & 0xff;

                int avg = (r + g + b)/3;

                //replace RGB value with avg
                p = (a << 24) | (avg << 16) | (avg << 8) | avg;

                img.setRGB(j, i, p);
            }
        }

0X03 对抗恶意刷流

第二个难点是如何既保证使用体验又避免恶意刷流量,考虑到应用的生命周期极短,我采用的方法是带宽采用按流量计费,应用中增加单 IP 下载次数限制, Guava 的 Cache 类很好的满足了我需求。

具体实现如下:

         // Cache 定义,注意到 expireAfterWrite 非常关键,它用来控制限流周期。
         private final LoadingCache<String, AtomicInteger> cache = CacheBuilder.newBuilder().expireAfterWrite(1, TimeUnit.DAYS).build(new CacheLoader<String, AtomicInteger>() {
            @Override
            public AtomicInteger load(final String s) throws Exception {
                return new AtomicInteger(0);
            }
        });

        // 超限检查
        String ip = request.getRemoteAddr();
        AtomicInteger counter = cache.get(ip);

        if (counter.getAndIncrement() > 50) {
            log.error("ip {} try too many time, rejected!", ip);
            throw new RuntimeException("try too many!");
        }

 

0X04 总结

这是我的一个人作品,甚至我还获得的人生的第一粒金(有慷慨老哥支持了 0.1 元),这个项目技术难度不高,最难的部分其实是推广,即如何让更多的人了解到你的作品,这个是我的短板。不管怎么说,我离正式创业项目也迈进了一步,尽管没有什么收入能做出一个有价值的小工具我也非常高兴。

觉得好有可以分享给朋友,感谢啦。

原文地址:https://www.cnblogs.com/jerry-chin/p/12631590.html

时间: 2024-10-28 22:12:59

响应微博小秘书倡议 连夜加急撸出头像变灰小工具之开发历程的相关文章

使用C#开发纽曼USB来电小秘书客户端小结

在前面用C#开发完CRM的来电弹屏之后,有些客户有了新的要求,他们希望不但能够实现来电弹屏,更希望能够将呼入呼出的电话录音并上传到CRM服务器上,方便日后跟踪记录.于是便有了来电小秘书客户端的开发.   来电小秘书客户端的开发是基于纽曼USB来电通客户端的基础上进行开发的,由于纽曼USB来电通的硬件没有录音功能,于是硬件上使用了纽曼的另一个硬件产品来电小秘书,虽然是同一个厂家的产品,可是它们的API却是完全不兼容,更烦的是,来电小秘书API没有来电的回调接口,无法通过回调触发程序,也没有C#的D

两天撸一个天气应用微信小程序

这是一个完整的已经线上运行的天气应用小程序,点击可查看源码,可随意 star.也可以扫描下方的小程序码直接体验. 效果图: 说明 鸣谢:pure 天气 APP:首页样式借鉴了 pure天气 APP.如侵删. 数据来源 地理编码.天气数据均来自百度地图开放平台.个人开发完全免费,有对应的小程序 sdk,加入即可,但是返回的天气数据较少. 运行前准备 注册微信小程序,获取 appid 注册百度地图开放平台开发者,创建应用,获取 ak(其他配置自行查看) 在 app.js 中替换 globalData

js制作带有遮罩弹出层实现登录小窗口

要实现的效果如下 点击“登录”按钮后,弹出登录小窗口,并且有遮罩层(这个名词还是百度知道的,以前只知道效果,却不知道名字) 在没有点击“登录”按钮之前登录小窗口不显示,点击“登录”按钮后小窗口显示,并且遮罩层笼罩整个页面,使整个页面的其他元素暂时失去行为. 遮罩层的实现:相对于body绝对定位,宽度和高度都和body相同,并且有一定的透明度,使得下面的元素能够被看到.原先的元素的z-index为0,遮罩层的z-index在弹出登录小窗口和原先元素的之间. 说的不是很清楚,还是看代码吧! <!DO

如?何?屏?蔽?C?h?r?o?m?e?、?S?a?f?a?r?i?等?W?e?b?k?i?t?内?核?浏?览?器?文?本?框?和?文?本?域?的?高?亮?边?框?、?可?变?大?小?等?自?动?外?观?处?理

1.高亮外框的取消 input { outline: none; } textarea { outline: none; } 如上,使用CSS的outline就可以实现 2.文本域缩放功能的取消 也是使用CSS,具体有两种方法 textarea { width: 400px; max-width: 400px; height: 400px; max-height: 400px; 上面是限定最大宽度和高度(CSS2),这也是最容易想到的方法了 texearea { resize: none; }

微信小程序再添能力:搜一搜增加小程序入口

随着移动互联网的快速发展,流量正悄然的变成大数据,借助"入口+流量"模式,互联网激活了大量的个性化入口,积累了巨量流量,并形成高企的资本市场估值.小程序作为当前最新的应用模式,在微信不断开放入口之后,或将迎来流量的爆发期. 今天,笔者发现,微信又为小程序开放了一个超级入口:微信搜一搜增添小程序入口.用户在微信发现中,通过搜一搜 输入关键词,比如水果,搜索页面便会出现相关小程序推荐,点击更多,可直接进入小程序"水果"的搜索页面,相关小程序都会出现在页面中. 点击微信搜

9个瘦臀的妙招大PP轻松变性感小翘臀

很多女性因为久坐导致的自己的身材越来越胖,尤其是小屁屁和小腹变得非常胖,那么要如何瘦出迷人的美臀呢?下面我们的专家告诉你9个瘦臀的妙招 大pp轻松变性感小翘臀,接下来大家就来听听小编的介绍吧! 1.练瑜伽瘦臀 练瑜伽可以很好地塑造体形,对于不爱出门的mm是一种不错的选择.因为瑜珈对场地的要求不高,随便在地板上就可以练瑜伽.想瘦臀的美眉,可以专门练习对瘦臀游泳的动作,有空时在家多练,就可以达到瘦臀的目的了,也可以锻炼身体,是一个非常不错的减肥方法哦! 2.提臀运动 两脚分开站立,与肩同宽,脚尖向前

log(n)时间内找出数组第i小的数字

参考算法导论9.2 R_Select(int *a,int p,int r,int i){ if(p==r) return a[p]; int q=partition(a,p,r); int k=q-p; if(i==k) return a[q]; else if(i<k) return R_Select(a,p,q-1,i); else return R_Select(a,q+1,r,i-k); } log(n)时间内找出数组第i小的数字

找出该树中第二小的值--思路及算法实现

在二叉树中最重要的操作莫过于遍历,即按照某一顺序访问树中的所有节点.二叉树的前序遍历.中序遍历.后序遍历都有递归和循环两种不同的实现方法.每种遍历的递归实现都比循环实现要简洁很多.下面分享一个关于二叉树遍历到笔试题: 给定一棵完全二叉树,即树中的每一个节点有2个子节点或者没有子节点,每一个节点的值小于等于它的子节点的值.请找出该树中第二小的值.如果没有第二小的值,请给出-1: 解题思路:画图举例解决问题,如下图所示,根节点是1,每一个节点的值小于等于它的子节点的值,访问根节点后再先后访问左子树和

关于微擎小程序的操作的步骤,如何上传小程序?

2018年,微信小程序,到了风口期了,小龙欧巴,孵化了快1年多的项目,注定会成为大家经常接触的项目, 微擎,基于微信第三方的开发框架,的确好用,只是文档的更新貌似永久性停留在了2017年4月份啦! https://www.we7.cc/manual/index.php 故鄙人特开此博客,来记录学习微擎开发过程中的各种神坑. 第一讲:讲解如何安装微擎小程序 (1).配置环境 微擎是基于php的开发框架,故要搭载好php的运行环境: 可以自己分个下载php.mysql.apache进行配置安装: 或