nodejsは円形の写真を裁断します.
4478 ワード
問題の出所
先端開発においては、円形の画像を展示するニーズが常にあります.H 5開発においては、border-radius属性を使えば解決できます.AndroidやIOSにもそれなりの方法があります.バックエンドで円形の写真を切り取りたいなら、どうやって解決しますか?
Solution
ImageMagic(未検証)
システムがイマジmagicを使用している場合は、下記のように裁断することができます.
node-pngjs
裁断は原理的には、円の外側にある画素を透明にし、アルファチャンネルを0にすることです.したがって、画像画素を直接読み込んで操作することができます.
参照
How to use graphic smagick in node.js to crop circule picture(other use any other way to make this on node.js)
node-pngjs
Crop or mark an image into a circule
先端開発においては、円形の画像を展示するニーズが常にあります.H 5開発においては、border-radius属性を使えば解決できます.AndroidやIOSにもそれなりの方法があります.バックエンドで円形の写真を切り取りたいなら、どうやって解決しますか?
Solution
ImageMagic(未検証)
システムがイマジmagicを使用している場合は、下記のように裁断することができます.
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から来ています.ホストコンピュータではGraphics Magicを使用していますので、上記命令は未経験です.node-pngjs
裁断は原理的には、円の外側にある画素を透明にし、アルファチャンネルを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 graphic smagick in node.js to crop circule picture(other use any other way to make this on node.js)
node-pngjs
Crop or mark an image into a circule