nodejs裁剪圆形图片(crop to circle image)
2016-08-15 22:37
597 查看
问题来源
在前端开发当中,经常有展示圆形图像的需求。在H5开发当中,使用border-radius属性就可以解决,安卓或者IOS,肯定也有相应办法。如果想在后端裁剪出圆形图片,该怎么解决呢?
Solution
ImageMagic(未验证)
如果系统使用的是imagemagic,可以使用如下命令裁剪:convert -size 200x200 xc:none -fill walter.jpg -draw "circle 100,100 100,1" circle_thumb.png
对于于nodejs gm,代码如下:
var gm = require('gm').subClass({ imageMagick: true }); var original = 'app-server/photo.jpg'; var output = 'app-server/photo.png'; var size = 80; gm(original) .crop(233, 233,29,26) .resize(size, size) .write(output, function() { gm(size, size, 'none') .fill(output) .drawCircle(size/2,size/2, size/2, 0) .write(output, function(err) { console.log(err || 'done'); }); });
注意,该部分代码来源于stackoverflow。由于博主电脑上用的是GraphicsMagic,所以上述命令未经验证。
node-pngjs
裁剪从原理上来说,就是让处于圆外的像素变成透明,即将其alpha通道改成0。所以可以直接读取并操作图片像素。var fs = require('fs'), PNG = require('pngjs').PNG; var input = 'test.png'; fs.createReadStream(input) .pipe(new PNG({filterType: 4})) .on('parsed', function() { for (var y = 0; y < this.height; y++) { for (var x = 0; x < this.width; x++) { var idx = (this.width * y + x) << 2; if (Math.pow(x-radius,2) + Math.pow(y-radius,2) > Math.pow(radius,2)) { this.data[idx+3] = 0; } } } this.pack().pipe(fs.createWriteStream(input)); callback(null, param); });
值得注意的是,node-pngjs只支持png图片的读写,所以在裁剪之前需要先对图片进行格式转化。这个办法的优势在于,不依赖于图形处理库,只靠js代码就可以搞定。
参考
How to use graphicsmagick in node.js to crop circle picture (other use any other way to make this on node.js)node-pngjs
Crop or mask an image into a circle
相关文章推荐
- CircleImageManager——圆形 / 圆角图片的工具类
- 自定义圆形图片CircleImageView
- 在RecyclerView中使用Glide和CircleImageView加载圆形图片时出现图片错乱
- 圆形图片自定义控件CircleImageView,支持布局文件中直接使用(附源码)
- android圆形图片,圆形背景文字的CircleTextImageView开源组件
- 用开源项目CropImage实现图片的裁剪(不推荐)
- 圆形图片CircleImageView
- Android自定义圆形图片控件CircleImageView
- 图片裁剪之CropImageViewdd
- Glide 加载圆形图片CircleImageView遇到的问题
- Android中自定义圆形图片的CircleImageView和RoundedImageView基本使用效果
- 上传图片,裁剪图片 CropImage+NET
- 对图片进行各种样式裁对图片进行各种样式裁剪:圆形、星形、心形、花瓣形等剪:圆形、星形、心形、花瓣形等--第三方开源--CustomShapeImageView
- Android CustomShapeImageView对图片进行各种样式裁剪:圆形、星形、心形、花瓣形等
- 解决:Call to undefined function imagecreatefromjpeg;JPEG Support enabled却不成正常压缩裁剪jpeg图片
- 圆形图片CircleImageView(解决内存溢出)
- 对图片进行各种样式裁对图片进行各种样式裁剪:圆形、星形、心形、花瓣形等剪:圆形、星形、心形、花瓣形等--第三方开源--CustomShapeImageView
- 圆形图片CircleImageView
- 【Android自定义View实战】之自定义圆形头像CircleImageView支持加载网络图片
- Xamarin Android Circle ImageView 圆形图片实现