These are chat archives for matiasgagliano/guillotine

4th
Nov 2015
Matías Gagliano
@matiasgagliano
Nov 04 2015 02:36

The only sane way to transform an image client-side with javascript is using HTML5 canvas. It's not too complicated but being a relatively new feature it's not widely supported. That's why Guillotine only tells you what area the user wants and leaves it up to developers to choose the best method to get it.

With a bit of code you can pair up Guillotine and a canvas to crop the image client-side, something like:

```javascript
// Create an empty canvas element
var canvas = document.createElement("canvas");
canvas.width = img.width;
canvas.height = img.height;

// Copy the image contents to the canvas
var ctx = canvas.getContext("2d");
ctx.drawImage(img, 0, 0);

// Get data from Guillotine then rotate, zoom and crop the image inside the canvas
var data = $(img).guillotine('getData');

// Process the image (rotate, zoom and crop inside the canvas)

// Get the data-URL formatted image.
// This is what you upload to the server and parse as image.
var dataURL = canvas.toDataURL("image/png");

// Upload the image
$.ajax({
type: "POST",
url: "/save_image",
data: {
img: dataURL
}
}
```javascript

Matías Gagliano
@matiasgagliano
Nov 04 2015 02:51
Sorry, here is the code properly displayed:
// Create an empty canvas element
var canvas = document.createElement("canvas");
canvas.width = img.width;
canvas.height = img.height;

// Copy the image contents to the canvas
var ctx = canvas.getContext("2d");
ctx.drawImage(img, 0, 0);

// Get data from Guillotine
var data = $(img).guillotine("getData");

// Use the data above to process the image (rotate, zoom and crop inside the canvas)
// ...

// Get the data-URL formatted image.
// This is what you upload to the server and parse as image.
var dataURL = canvas.toDataURL("image/png");

// Upload the image
$.ajax({
  type: "POST",
  url: "/save_image",
  data: {
    img: dataURL
  }
}
Matías Gagliano
@matiasgagliano
Nov 04 2015 02:56
Adding presto to the mix you can get the image from a file input before uploading it, process it and upload the transformed image.
Hope it helps.