Guillotine with result direcly exported in base64

[Nicolas Blanco]

Hi,

The dream would be to be able to use guillotine.js and directly be able to get the cropped/scaled image into base64. This way one could directly inject the base64 result into a form, and the server would not have to do anything aside from saving the base64 data.

Do you think it's currently possible? I tried to generate an image in JS, inject it into a canvas element and apply guillotine on it but it does not get activated and no errors is raised.

Nicolas.

[mgag....@gmail.com]

Hi Nicolas, it would be ideal but processing images can be too much for devises with scarce resources (like many mobile devises) and won't work at all in older browsers. That's why I decided to limit Guillotine to only get transformation instructions and leave the actual implementation to the user.

So, If you plan ahead some fallbacks you certainly can pull it off.

Getting the image inside a canvas and instantiating Guillotine over it won't work. You should load Guillotine over any regular image, then when the user is done with the transformations get the instructions with `img.guillotine('getData')`, transform the image inside a canvas and get the base64 data.

Something like this (after the user is done):

// Create an empty canvas element.
var canvas = document.createElement("canvas");
canvas.width = img.naturalWidth || img.width;
canvas.height = img.naturalHeight || img.height;


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


// Transformation: rotate, scale and crop the image inside the
// canvas using the data you get from `img.guillotine('getData')`.
// ...


// 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
  }
}

A couple of resources about HTML canvas (to help you with the transformation step):
- HTML canvas deep dive

- Canvassing

Happy coding!
Matías.