Pass custom image on add to cart

Question

I'm trying to replicate the behavior that this site has: http://pixers.es/fotomurales/hermosa-mujer-ejemplo-de-la-acuarela-59301559

As you can see you can select a certain portion of the image to buy it. If you select any size and click add to cart it passes the selection to the cart.

I have managed to put the jCrop to create the custom selection (http://pixelbypixel.comli.com/jcrop/) but I don't know what would be the best way to pass this selection to the add to cart button (in woocommerce) and replace the actual product image on the cart with the selection.

I have found this: https://support.woothemes.com/hc/communities/public/questions/201449733-Is-there-a-Woocommerce-before-or-after-add-to-cart-hook-I-can-use-for-my-custom-plugin-

So I guess this would be the way to start:

    add_action( 'wp_enqueue_scripts', 'custom_enqueue_js' );
    function custom_enqueue_js() {
        wp_enqueue_script( 'custom-js', get_template_directory_uri() . '/your-file-path/filename.js', array( 'jquery' ), '', true );
    }

    (function($) {
      $(document).off( 'click', '.add_to_cart_button' );
      $(document).on( 'click', '.add_to_cart_button', function() {
        //your code here
      });
    });

Any ideas what would be the way to do this?