Сохранение картинки, вырезанной из тега div

Я нашел способ переместить изображение в рамке из метки.
Работает отлично, как я хочу. Код как потоки:

<script type="text/javascript">
jQuery(document).ready(function () {
jQuery("#my-image").css({top: 0, left: 0});

var maskWidth = jQuery("#my-mask").width();
var maskHeight = jQuery("#my-mask").height();
var imgPos = jQuery("#my-image").offset();
var imgWidth = jQuery("#my-image").width();
var imgHeight = jQuery("#my-image").height();

var x1 = (imgPos.left + maskWidth) - imgWidth;
var y1 = (imgPos.top + maskHeight) - imgHeight;
var x2 = imgPos.left;
var y2 = imgPos.top;

jQuery("#my-image").draggable({containment: [x1, y1, x2, y2]});
jQuery("#my-image").css({cursor: 'move'});
});

</script><div id="my-mask" style="width: 600px; height: 200px; overflow: hidden;">
<img id="my-image" src="stormP.jpg" width="" height=""/>
</div>

Теперь я хочу кнопку, которая может сохранить видимую часть изображения в новом файле.
Может кто-то указать мне верное направление. Я понятия не имею, как это сделать. Я использую PHP, CSS и JQuery.

В качестве альтернативы я могу использовать CSS, чтобы поместить изображение отверстия внутри тега со скрытым переполнением.
В этом случае мне нужны координаты верхнего левого угла по сравнению с координатами изображения. Тогда я бы установил background-position: -300px -330px; поскольку верхние левые углы X, Y координируются относительно изображения следующим образом:

<div style="cursor: pointer; width: 600px; height: 200px; background-image: url(stormP.jpg); background-repeat: no-repeat;  background-position: -300px -330px;">

Любой из двух подойдет.

Любая помощь будет оценена!