2016-04-06 6 views
0

Ich habe versucht, node-gm + Imagemagick zum kreisförmigen Zuschneiden eines Bildes verwenden.Node-gm kreisförmigen Bildausschnitt mit Imagemagick

Wie auch immer, hier ist mein Versuch, eine Maske mit einem schwarzen Kreis zu erstellen.

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'); 
       }); 
      }); 

    }); 

Ich bin sicher, das über eine ausgefallene String Befehl Verkettung getan werden kann, aber trotz meiner fehlenden Bildverarbeitung Fähigkeiten, ich will noch den Code sauber zu halten. Ich bin wirklich auf der Suche nach einer Lösung mit Node-GM-Funktionen, vorzugsweise mit weniger Operationen als mein Versuch (vorzugsweise auch etwas, das funktioniert, im Gegensatz zu mir).

Ich habe auch versucht zu Kette aus den Funktionsaufrufen für diesen Befehl ohne Erfolg: https://stackoverflow.com/a/999563/1267778

Hinweis ich an einem bestimmten Ort beschneiden muß (w, h, x, y), so dass diese Lösungen auch don‘ t Arbeit für mich:

node-pngjs

node-circle-image

Antwort

0

Verstanden! Nach vielen Stunden des Fiedelns bekam ich genau das, was ich brauchte.

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'); 
     }); 
    }); 

I JCrop bin mit dem Benutzer zu ermöglichen, das Bild auf der Front-End-beschneiden, und die Koordinaten (w, h, x, y) in crop() übergibt.