乌合之众

乌合之众 查看完整档案

北京编辑  |  填写毕业院校  |  填写所在公司/组织填写个人主网站
编辑

个人动态

乌合之众 赞了文章 · 2020-03-28

http status为401时,避免浏览器弹出认证框

Basic认证失败时,接口返回的http status code = 401时,大部分浏览器会弹出下图的认证窗口来辅助用户完成认证。

401认证弹窗

这时,要点击取消才能进入到axios catch function。
解决到方法很简单,在response headers中去除 WWW-Authenticate: Basic realm="Realm" 即可。

查看原文

赞 2 收藏 0 评论 3

乌合之众 回答了问题 · 2020-03-14

解决glog如何设置文件大小,并且按日期分

设置 glog.MaxSize 的大小,可以按文件大小分割。
要按日期分割,可以修改源码 glog.go#L814-L826

var (
    // 最大时间间隔
    MaxTimeLag time.Duration = time.Hour*24
    // 最后一次的日志文件时间
    lastTime time.Time = time.Now()
)
func (sb *syncBuffer) Write(p []byte) (n int, err error) {
    now := time.Now()
    if (sb.nbytes+uint64(len(p)) >= MaxSize) || (now.Sub(lastTime) >= MaxTimeLag) {
        for now.Sub(lastTime) >= MaxTimeLag {
            lastTime = lastTime.Add(MaxTimeLag)
        }
        if err := sb.rotateFile(now); err != nil {
            sb.logger.exit(err)
        }
    }
    if now.Sub(lastTime) >= MaxTimeLag {
        lastTime = lastTime.Add(MaxTimeLag)
        if err := sb.rotateFile(now); err != nil {
            sb.logger.exit(err)
        }
    }
    n, err = sb.Writer.Write(p)
    sb.nbytes += uint64(n)
    if err != nil {
        sb.logger.exit(err)
    }
    return
}

关注 2 回答 1

乌合之众 关注了标签 · 2020-01-11

golang

Go语言是谷歌2009发布的第二款开源编程语言。Go语言专门针对多处理器系统应用程序的编程进行了优化,使用Go编译的程序可以媲美C或C++代码的速度,而且更加安全、支持并行进程。
Go语言是谷歌推出的一种全新的编程语言,可以在不损失应用程序性能的情况下降低代码的复杂性。谷歌首席软件工程师罗布派克(Rob Pike)说:我们之所以开发Go,是因为过去10多年间软件开发的难度令人沮丧。Go是谷歌2009发布的第二款编程语言。

七牛云存储CEO许式伟出版《Go语言编程
go语言翻译项目 http://code.google.com/p/gola...
《go编程导读》 http://code.google.com/p/ac-m...
golang的官方文档 http://golang.org/doc/docs.html
golang windows上安装 http://code.google.com/p/gomi...

关注 26198

乌合之众 回答了问题 · 2020-01-11

关于在for循环中使用exp函数计时的问题

不请自来。
应该不是计时函数的问题,可以在测试前先调用两次看看耗时。
这里可能是CPU缓存的问题,你可以多试几个函数,基本上都是第一次调用耗时较长,后面就差不多了。并且约简单的函数,这个差异越小,约复杂的函数,差异越大。

关注 2 回答 1

乌合之众 赞了回答 · 2020-01-11

解决std::bind出现unresolved overloaded function type的问题?

void  Event::register_handler()
{
handle_io = std::bind(&Event::default_handle_io, this);
handle_timer = std::bind(&Event::default_handle_timer, this);
}

关注 3 回答 2

乌合之众 关注了专栏 · 2019-12-02

前端小窝

记录点点滴滴,好好生活,认真撸猫

关注 9

乌合之众 收藏了文章 · 2019-05-23

分布式任务框架之celery

架构

clipboard.png

  • Broker

    消息代理,作为临时储存任务的中间媒介,为 Celery 提供了队列服务。生产者将任务发送到 Broker,消费者再从 Broker 获取任务。

Celery目前支持RabbitMQ、Redis、MongoDB、Beanstalk、SQLAlchemy、Zookeeper等 作为消息代理,但适用于生产环境的只有RabbitMQ和Redis,至于其他的方式,一是支持有限, 二是可能得不到更好的技术支持。
Celery官方推荐的是RabbitMQ,Celery的作者Ask Solem Hoel最初在VMware就是为RabbitMQ工作的,Celer最初的设计就是基于RabbitMQ,所以使用 RabbitMQ会非常稳定,成功案例很多。如果使用Redis,则有可能发生突然断电之类的问题 造成Redis突然终止后的数据丢失等后果。
  • Beat

    任务调度器,负责调度并触发 Celery 定时周期任务。Beat 进程读取 CeleryConfig 中自定义的定时周期任务列表,将到期需要执行的定时任务发送到任务队列中。

  • Worker

    任务执行单元,实际负责执行任务的服务进程,每一个 Worker 都有一个并发池(Prefork/Eventlet/Gevent/Thread)来支持多并发。Worker 会监听订阅的任务队列,当队列中有任务时,就会获取任务并执行。

  • Result Backend/Store

    任务执行状态和结果存储,Celery 支持任务实时处理,也就是说 Celery 可以把任务执行的实时状态和最终结果回传生产者。这种回传也需要通过中间存储媒介。

web监控管理

添加管理任务

clipboard.png

任务的监控

clipboard.png

clipboard.png

celery的魅力

  • 高可用

  1. 对于celery worker来说,其实部署在多个节点上,就是高可用的。
  2. 对于borker来说,我们使用了rabbitmq集群来保证高可用(我们线上同时也有其他celery服务使用了AWS的SQS作为borker,其本身就是保证高可用的)。
  3. 对于celerybeat(就是启动定时任务的程序)来说,只能使用单节点启动,很难保证高可用,但是我们这边线上,并没有使用celerybeat来启动celery定时任务,而是使用了第三方服务(AWS lambda)来发送定时任务到celery borker中(相当于实现了celerybeat功能),这样就用第三方的这个服务保证高可用。
    其实除了使用AWS lambda的这种方案,我们还使用了在docker集群中部署celerybeat的方案,这种其实也是能保证celerybeat的高可用的

参考文献:

  1. Celery+RabbitMQ的多机器worker节点介绍
  2. celery有什么难理解的
查看原文

乌合之众 回答了问题 · 2019-05-23

解决MongoDB C Driver如何进行分页?

时间过去两年了,这个问题早就解决了。

// begin 是要跳过的个数,count是要获取的个数
mongoc_cursor_t* cursor =
        mongoc_collection_find(coll, MONGOC_QUERY_NONE,
            begin, count, count, &query, &feild, NULL);

关注 4 回答 4

乌合之众 赞了文章 · 2018-12-10

前端图像处理指南

计算机图像处理是一门很成熟的技术,任何一门可操作系统接口的语言都能很轻易的实现各种处理操作。但是前端限于浏览器环境和接口限制,处理起来会有诸多不便,这里所说的前端图像处理,是真的指不借助任何后端服务纯前端实现的图像处理。本文会介绍canvas位图处理,SVG矢量图和CSS3图像处理,重点是canvas,并且最后会附上一个TrimPNG小应用

canvas位图处理

HTML5 canvas为我们提供了一块画布,让前端也有了操作位图的功能:图片旋转、缩放、滤镜、压缩等都可以通过JS来实现。

图像基本处理

通过设置drawImage参数可以实现图片绘制、缩放、拉伸和裁剪等操作(注意canvas无法绘制体积过大图片,否则会卡甚至崩掉,大图可以分块读取绘制):

图片描述

详细用法参考 drawImage(),DEMO源码戳这里 JS Bin.

只需要drawImage一个方法,就可以实现基本图形处理功能,再结合鼠标或滚轮事件,就可以实现更复杂的局部放大预览,缩放等功能了。

图像滤镜处理

现在的朋友圈发个图都要用滤镜美一下,复古清纯胶片LOMO各种风格应有尽有。canvas提供了getImageData方法来获取图像上每一个像素点的RGBA信息,这样我们就能对图片进行像素级处理了。通过特定算法来重写imageData中的像素信息,然后用setImageData方法把新的数据重新绘制在canvas上,这样就可以实现图像滤镜打码加特效等一系列功能。

比如我们现在要实现一个复古滤镜:

// 复古滤镜处理算法:获取每个像素的RGB信息,并按特定权重返回其加权平均值
let sepiaFilter = function(imgData) {
  let d = imgData.data
  for (let i = 0; i < d.length; i += 4) {
    let r = d[i]
    let g = d[i + 1]
    let b = d[i + 2]
    d[i] = (r * 0.393) + (g * 0.769) + (b * 0.189) // red
    d[i + 1] = (r * 0.349) + (g * 0.686) + (b * 0.168) // green
    d[i + 2] = (r * 0.272) + (g * 0.534) + (b * 0.131) // blue
  }
  return imgData
}
//图像地址必须和当前页面同域,否则会报cross-origin错误 
img.src = '/img/logo@2x.png' 
img.onload = () => {
  ctx.drawImage(img, 0, 0) // 绘制原图
  let imgData = ctx.getImageData(0, 0, img.width, img.height) // 获取图片信息
  ctx.putImageData(sepiaFilter(imgData), 100, 0) // 绘制处理后图片
}

图片描述

详细用法参考 getImageData()putImageData(),DEMO源码戳这里 JSFiddle.

滤镜处理关键在于滤镜算法,要想写出更高级的特效需要有计算机图形学基础,对卷积矩阵、拉普拉斯变换、傅里叶变换等数学知识也要了解,这个坑很大我就不挖了。

图像base64存储

加完特效后如果我们想把图像保存下来,就可以用toDataURL方法来对图片进行格式转换、压缩存储了。

// 支持三种文件类型:image/png(默认) | image/jpeg | image/webp(仅Chrome)
canvas.toDataURL() // 默认存储为png
// 仅jpeg/webp支持质量参数(0~1,默认0.92)
canvas.toDataURL("image/jpeg", 0.1) // 存储为质量为0.1的jpeg

由于存储形式是base64编码,原来图片的每三个字节都会被扩展成4字节,所以整体上编码后数据会比原来多约1/3。以下是通过toDataURL存储后的图片和原图大小相关对比数据(数据仅供参考,不具通用性):

图片描述

可见存储后图片体积并不是原来的4/3,实际上处理后的图片都会比原图大好几倍,并且不同的图片增大的体积也是不确定的。如果是要上传图片到服务器,可以把base64转化成Blob二进制数据压缩上传;如果要直接在前端显示或供用户下载,jpg还好可以设置质量参数,要是png就没法压缩了。

只是用toDataURL还不够,用户需要通过手动点击图片-右键图片存储为来保存图片,如果要实现点击下载按钮自动下载图片还需要修改图片类型为octet-stream,然后利用HTML5的download属性强制让浏览器下载。

详细用法参考toDataURL(). 自动下载图片DEMO源码快戳我 JSFiddle.

程序员的备胎

有了以上基础,再结合成熟的图形处理算法,我们可以完成日常工作中大部分图像处理需求,以下列出了一些相关轮子可做备胎。备胎这种东西多多益善,万一以后用到了呢?

注意:本人很专一。

html2canvas

将web页面通过canvas来实现截屏,其原理就是遍历DOM结构和样式,然后在canvas中绘制出来,通过toDataURL输出图片。但由于canvas图片的同源策略限制,如果图片和网站不同源的话会截取不出来的。另外在微信中测试时,即使用同源的图片截取出来的图片也有问题,所以要想将其用于生产环境,还是得看场景,有很多坑要踩。

code-to-image

代码转图片工具。有时候你在不同的平台写文章贴代码,由于不同平台代码格式化规范不一,所以经常会出现代码排版问题,通过这个工具将代码转成图片就可以避免排版问题了。

Cropper

一个专门用来做图片裁剪的应用。

tracking.js

这是一个专业的计算机视觉处理JS库,包含了大量图形处理算法,可用来做人脸识别,色彩追踪等酷炫功能。

qrcode2

用JS动态生成二维码,这个库还是很实用的,原理就是qrcode算法+canvas绘图,不支持canvas的用table兼容。

AlloyImage

腾讯出的基于HTML5的专业级图像处理开源引擎,功能很强大,简直就是Web版的PS。

以上列举部分,更多备胎在此: https://github.com/0326/canvas

SVG矢量图处理

讲完位图再说矢量图。矢量图在绘制图标、商业LOGO、动画元素上应用非常广范。Web最开始支持的矢量图形并不是现在的SVG,而是微软主推的VML,所以在低版本IE下面只支持VML而不支持SVG,直到后来SVG成为W3C标准并被普及,微软才在IE9中支持SVG。

SVG遵循XML规范,可以很好的集成在HTML里面,同时支持JS脚本控制,还有基于SMIL标准的动态内容支持,做起动画来也是非常方便。目前基于SVG的JS图形库轮子也是非常多,如svg.js, Snap.svg, Velocity.js, D3.js等等,目前暂无SVG应用需求,等用的时候再翻牌子吧。

CSS图像处理

如果你的图像特效只是用来给用户展示,并不需要存储的话,可以直接用CSS处理,基本的调整图片大小、拉伸、旋转、裁切等操作直接几个CSS属性width/height/skew/rotate/clip-path等就能搞定了。如果想加特效,使用CSS滤镜Duang的一下就出来了,不需要任何图形学基础和数学知识:

详细说明见 CSS filter - MDN, DEMO 源码见JS Bin.

总结

最后介绍个小工具TrimPNG。大家都知道TinyPNG可以压缩PNG, TrimPNG顾名思义就是去除图片空白和白边的,实现了自动抠图和切图的功能(logo我是直接抄的TinyPNG,都是熊猫,应该不要紧?)

图片描述

用到的技术点上面都说到了,裁切实现原理就是横向纵向分别扫描两次像素点阵,找出上下左右最外面的非透明点,然后定位出有效图像区域。去除白边算法目前还比较傻逼,只要是接近白色的点都被我干掉了,后面再完善好了 去白边算法优化了一下,采用标记清除策略(听着耳熟吧,其实就是从GC受的启发...),先扫描一遍标记出可疑白点,然后再扫描一遍,凡是与透明区域相邻的可疑白点就清除,当然这个算法也比较死,如果有更专业更智能的请务必告诉我。

体验地址:http://quanfeng.tech/trimpng/

本文只抛砖,作为工作时技能储备,如有任何补充欢迎留言交流~,另外,你们这帮人呐,都收藏了就顺便点个推荐尼!⊙ o ⊙

查看原文

赞 28 收藏 81 评论 7

乌合之众 收藏了文章 · 2018-12-10

前端图像处理指南

计算机图像处理是一门很成熟的技术,任何一门可操作系统接口的语言都能很轻易的实现各种处理操作。但是前端限于浏览器环境和接口限制,处理起来会有诸多不便,这里所说的前端图像处理,是真的指不借助任何后端服务纯前端实现的图像处理。本文会介绍canvas位图处理,SVG矢量图和CSS3图像处理,重点是canvas,并且最后会附上一个TrimPNG小应用

canvas位图处理

HTML5 canvas为我们提供了一块画布,让前端也有了操作位图的功能:图片旋转、缩放、滤镜、压缩等都可以通过JS来实现。

图像基本处理

通过设置drawImage参数可以实现图片绘制、缩放、拉伸和裁剪等操作(注意canvas无法绘制体积过大图片,否则会卡甚至崩掉,大图可以分块读取绘制):

图片描述

详细用法参考 drawImage(),DEMO源码戳这里 JS Bin.

只需要drawImage一个方法,就可以实现基本图形处理功能,再结合鼠标或滚轮事件,就可以实现更复杂的局部放大预览,缩放等功能了。

图像滤镜处理

现在的朋友圈发个图都要用滤镜美一下,复古清纯胶片LOMO各种风格应有尽有。canvas提供了getImageData方法来获取图像上每一个像素点的RGBA信息,这样我们就能对图片进行像素级处理了。通过特定算法来重写imageData中的像素信息,然后用setImageData方法把新的数据重新绘制在canvas上,这样就可以实现图像滤镜打码加特效等一系列功能。

比如我们现在要实现一个复古滤镜:

// 复古滤镜处理算法:获取每个像素的RGB信息,并按特定权重返回其加权平均值
let sepiaFilter = function(imgData) {
  let d = imgData.data
  for (let i = 0; i < d.length; i += 4) {
    let r = d[i]
    let g = d[i + 1]
    let b = d[i + 2]
    d[i] = (r * 0.393) + (g * 0.769) + (b * 0.189) // red
    d[i + 1] = (r * 0.349) + (g * 0.686) + (b * 0.168) // green
    d[i + 2] = (r * 0.272) + (g * 0.534) + (b * 0.131) // blue
  }
  return imgData
}
//图像地址必须和当前页面同域,否则会报cross-origin错误 
img.src = '/img/logo@2x.png' 
img.onload = () => {
  ctx.drawImage(img, 0, 0) // 绘制原图
  let imgData = ctx.getImageData(0, 0, img.width, img.height) // 获取图片信息
  ctx.putImageData(sepiaFilter(imgData), 100, 0) // 绘制处理后图片
}

图片描述

详细用法参考 getImageData()putImageData(),DEMO源码戳这里 JSFiddle.

滤镜处理关键在于滤镜算法,要想写出更高级的特效需要有计算机图形学基础,对卷积矩阵、拉普拉斯变换、傅里叶变换等数学知识也要了解,这个坑很大我就不挖了。

图像base64存储

加完特效后如果我们想把图像保存下来,就可以用toDataURL方法来对图片进行格式转换、压缩存储了。

// 支持三种文件类型:image/png(默认) | image/jpeg | image/webp(仅Chrome)
canvas.toDataURL() // 默认存储为png
// 仅jpeg/webp支持质量参数(0~1,默认0.92)
canvas.toDataURL("image/jpeg", 0.1) // 存储为质量为0.1的jpeg

由于存储形式是base64编码,原来图片的每三个字节都会被扩展成4字节,所以整体上编码后数据会比原来多约1/3。以下是通过toDataURL存储后的图片和原图大小相关对比数据(数据仅供参考,不具通用性):

图片描述

可见存储后图片体积并不是原来的4/3,实际上处理后的图片都会比原图大好几倍,并且不同的图片增大的体积也是不确定的。如果是要上传图片到服务器,可以把base64转化成Blob二进制数据压缩上传;如果要直接在前端显示或供用户下载,jpg还好可以设置质量参数,要是png就没法压缩了。

只是用toDataURL还不够,用户需要通过手动点击图片-右键图片存储为来保存图片,如果要实现点击下载按钮自动下载图片还需要修改图片类型为octet-stream,然后利用HTML5的download属性强制让浏览器下载。

详细用法参考toDataURL(). 自动下载图片DEMO源码快戳我 JSFiddle.

程序员的备胎

有了以上基础,再结合成熟的图形处理算法,我们可以完成日常工作中大部分图像处理需求,以下列出了一些相关轮子可做备胎。备胎这种东西多多益善,万一以后用到了呢?

注意:本人很专一。

html2canvas

将web页面通过canvas来实现截屏,其原理就是遍历DOM结构和样式,然后在canvas中绘制出来,通过toDataURL输出图片。但由于canvas图片的同源策略限制,如果图片和网站不同源的话会截取不出来的。另外在微信中测试时,即使用同源的图片截取出来的图片也有问题,所以要想将其用于生产环境,还是得看场景,有很多坑要踩。

code-to-image

代码转图片工具。有时候你在不同的平台写文章贴代码,由于不同平台代码格式化规范不一,所以经常会出现代码排版问题,通过这个工具将代码转成图片就可以避免排版问题了。

Cropper

一个专门用来做图片裁剪的应用。

tracking.js

这是一个专业的计算机视觉处理JS库,包含了大量图形处理算法,可用来做人脸识别,色彩追踪等酷炫功能。

qrcode2

用JS动态生成二维码,这个库还是很实用的,原理就是qrcode算法+canvas绘图,不支持canvas的用table兼容。

AlloyImage

腾讯出的基于HTML5的专业级图像处理开源引擎,功能很强大,简直就是Web版的PS。

以上列举部分,更多备胎在此: https://github.com/0326/canvas

SVG矢量图处理

讲完位图再说矢量图。矢量图在绘制图标、商业LOGO、动画元素上应用非常广范。Web最开始支持的矢量图形并不是现在的SVG,而是微软主推的VML,所以在低版本IE下面只支持VML而不支持SVG,直到后来SVG成为W3C标准并被普及,微软才在IE9中支持SVG。

SVG遵循XML规范,可以很好的集成在HTML里面,同时支持JS脚本控制,还有基于SMIL标准的动态内容支持,做起动画来也是非常方便。目前基于SVG的JS图形库轮子也是非常多,如svg.js, Snap.svg, Velocity.js, D3.js等等,目前暂无SVG应用需求,等用的时候再翻牌子吧。

CSS图像处理

如果你的图像特效只是用来给用户展示,并不需要存储的话,可以直接用CSS处理,基本的调整图片大小、拉伸、旋转、裁切等操作直接几个CSS属性width/height/skew/rotate/clip-path等就能搞定了。如果想加特效,使用CSS滤镜Duang的一下就出来了,不需要任何图形学基础和数学知识:

详细说明见 CSS filter - MDN, DEMO 源码见JS Bin.

总结

最后介绍个小工具TrimPNG。大家都知道TinyPNG可以压缩PNG, TrimPNG顾名思义就是去除图片空白和白边的,实现了自动抠图和切图的功能(logo我是直接抄的TinyPNG,都是熊猫,应该不要紧?)

图片描述

用到的技术点上面都说到了,裁切实现原理就是横向纵向分别扫描两次像素点阵,找出上下左右最外面的非透明点,然后定位出有效图像区域。去除白边算法目前还比较傻逼,只要是接近白色的点都被我干掉了,后面再完善好了 去白边算法优化了一下,采用标记清除策略(听着耳熟吧,其实就是从GC受的启发...),先扫描一遍标记出可疑白点,然后再扫描一遍,凡是与透明区域相邻的可疑白点就清除,当然这个算法也比较死,如果有更专业更智能的请务必告诉我。

体验地址:http://quanfeng.tech/trimpng/

本文只抛砖,作为工作时技能储备,如有任何补充欢迎留言交流~,另外,你们这帮人呐,都收藏了就顺便点个推荐尼!⊙ o ⊙

查看原文

认证与成就

  • 获得 51 次点赞
  • 获得 14 枚徽章 获得 1 枚金徽章, 获得 3 枚银徽章, 获得 10 枚铜徽章

擅长技能
编辑

(゚∀゚ )
暂时没有

开源项目 & 著作
编辑

(゚∀゚ )
暂时没有

注册于 2016-03-01
个人主页被 1.5k 人浏览