Leaflet: project map coordinates to pixel coordinates

What I am trying to achieve is when a rectangle is drawn on the map, I want to project this rectangles map coordinates into the coordinate space of the original image so that I can crop the original image and provide a download link to the user.

However I am having problems projecting the rectangles map coordinate's into accurate pixel coordinates in the original image.

I thought the following would work, however its producing pixel coordinates that are incorrect.

map.on('draw:created', function(e){
    var type = e.layerType,
    layer = e.layer;

    if(type == 'rectangle'){
    if(rectangle){
        drawnItems.removeLayer(rectangle);
    }
    rectangle = layer;
    drawnItems.addLayer(rectangle);

    var north_west = rectangle.getBounds().getNorthWest();
    var south_east = rectangle.getBounds().getSouthEast();

    var top_left_pixel = map.project([north_west.lat, north_west.lng], map.getMaxZoom());
    var bottom_right_pixel = map.project([south_east.lat, south_east.lng], map.getMaxZoom());

    alert("top_left_pixel: " + (top_left_pixel.x / 4) + ", " + (top_left_pixel.y / 4) + " bottom_right_pixel: " + (bottom_right_pixel.x / 4) + ", " + (bottom_right_pixel.y / 4));
    }
});

Here is an example of the in accurate projection from map coordinates (left image) into pixel coordinates (right image).

What am I doing wrong?

Actually it turns out that I was doing nothing wrong, the above idea works perfectly.

I was using the width and height of the original image, however during processing MapTiler changed the resolution of the base image. I figured this out by regenerating the tiles and inspecting the example leaflet.html thats generated by MapTiler. I was surprised to see the bounds were set to 2*(width of original base image) and 1.99*(height of original base image).

Taking this information into account fixed my inaccurate projection.