matiasgali / guillotine

jQuery plugin to crop images within an area (fully responsive), allowing to drag (touch support), zoom and rotate.
http://guillotine.js.org
326 stars 100 forks source link

Correct way to crop at Server end #9

Closed svapreddy closed 9 years ago

svapreddy commented 9 years ago

Hi Thanks for the great plugin. But would like to know how I can crop an image based on output given my guillotine. I have used nodeJS gm module like below.

 gm(req.files.file.path)
    .rotate('white', parseFloat(body.angle))
   .scale(body.mW * 1, body.mH * 1)
   .crop(body.mW_W * 1, body.mH_W * 1, body.x * 1, body.y * 1)
   .resize(parseInt(body.w), parseInt(body.h), "!")
   .quality(1)
   .setFormat("png")
   .write(small, function (err) {
   if (!err) {
       console.log('Done!');
   } else {
       console.log(err);
       console.log('error occurred');
   }
});

But it does not seems working either ways. Could you please route me to correct path where I can get cropping correctly done.

matiasgali commented 9 years ago

Hi, you're welcome. Keep in mind that the issue tracker is not meant for questions, you should use stackoverflow.com or something similar. Anyway, it wouldn't be nice to leave a comment without providing at least some help.

I don't know exactly how you're handling Guillotine's data but you should be able to get it right just by working with the output of Guillotine's getData. Your sample has the right order but just in case, remember to always zoom (scale) and rotate before cropping as stated in the documentation.

After reading gm's documentation I think you should do something like this (I'm using sample instead of scale):

// Convert Guillotine data on the server to numbers.
// 'data' should be equivalent to $('#theimage').guillotine('getData').
for (key in data) {
  var parse = (key == 'scale') ? parseFloat : parseInt
  data[key] = parse.call(window, data[key]);
}

// Transform image
gm('/path/to/img')
  .rotate('white', data.angle)
  .sample(data.scale + '%')
  .crop(data.w, data.h, data.x, data.y)
  .write('/path/to/output', function (err) {
    if (err) { console.log('An error occurred.'); return }
    // Success logic...
  });