2016-04-06 65 views
0

我一直在嘗試使用node-gm + Imagemagick來裁剪圖像。Node-gm圓形圖像裁剪使用Imagemagick

無論如何,這是我嘗試使用黑色圓圈創建遮罩。

var original = 'app-server/photo.jpg'; 
var output = 'app-server/photo.png'; 
var maskPath = 'app-server/photo-mask.png'; 

gm(original) 
    .crop(233, 233,29,26) 
    .resize(80, 80) 
    .setFormat('png') 
    .write(output, function (err) { 
     console.log(err || 'cropped to target size'); 

     gm(output) 
      .out('-size', '80x80') 
      .background('black') 
      .drawCircle(20,20, 0, 0) 
      .toBuffer('PNG',function (err, buffer) { 

       console.log(err || 'created circular black mask'); 

       //docs say "a buffer can be passed instead of 
       //a filepath" but this is apparently false 
       //and say something unclear about using black/white colors for masking. 
       //I'm clearly lost 
       gm(output) 
       .mask(maskPath) 
       .write(output, function (err) { 
        console.log(err || 'applied circular black mask to image'); 
       }); 
      }); 

    }); 

我敢肯定,這可以通過一些花哨的字符串命令拼接可以做到,但儘管我缺乏圖像處理實力的,我還是希望保持代碼的清潔。我真的在尋找一個使用node-gm函數的解決方案,最好用比我的嘗試少的操作(最好也是有效的,與我的不同)。

我也試圖鏈出函數調用沒有成功這個命令: https://stackoverflow.com/a/999563/1267778

注意我需要在特定位置裁剪(W,H,X,Y),因此這些解決方案也不要」對我來說將不起作用:

node-pngjs

node-circle-image

回答

0

明白了!經過幾個小時的擺弄之後,我得到了我需要的東西。

gm(originalFilePath) 
    .crop(233, 233,29,26) 
    .resize(size, size) 
    .write(outputFilePath, function(err) { 
    gm(size, size, 'none') 
     .fill(outputFilePath) 
     .drawCircle(size/2,size/2, size/2, 0) 
     .write(output, function(err) { 
      console.log(err || 'done'); 
     }); 
    }); 

我使用JCrop以允許用戶裁剪的前端的圖像和座標(W,H,X,Y)通入作物()。