код
картинка масштабируется, поворачивается, позиционируется таким образом чтоб нужный её фрагмент был вписан в рамку (70px*70px)
canvas = document.createElement("canvas");
var context = canvas.getContext("2d");
var pic = new Image();
pic.src = $('#img').attr('src');
var sq = Math.sqrt(crop.width * crop.width + crop.height * crop.height);
var k = crop.width / crop.height;
var wc, hc;
if (k >= 1) {
wc = sq;
hc = sq / k;
} else {
wc = sq;
hc = sq / k;
}
var x = new_img.x * pic.width / new_img.width - wc / 2 / img.scale;
var y = new_img.y * pic.height / new_img.height - hc / 2 / img.scale;
var w = wc / img.scale;
var h = hc / img.scale;
canvas.height = hc;
canvas.width = wc;
context.fillStyle = '#ffffff';
context.fillRect(0, 0, wc, hc);
context.drawImage(pic, x, y, w, h, 0, 0, wc, hc);
pic.src = canvas.toDataURL("image/jpeg", 1);
context.translate(wc / 2, hc / 2);
context.rotate((img.rotate * Math.PI) / 180);
context.drawImage(pic, -wc / 2, -hc / 2);
pic.src = canvas.toDataURL("image/jpeg", 1);
canvas.height = crop.height;
canvas.width = crop.width;
x = (wc - crop.width) / 2;
y = (hc - crop.height) / 2;
context.drawImage(pic, x, y, crop.width, crop.height, 0, 0, crop.width, crop.height);
document.querySelector('.cropped').innerHTML += '<div ><img id="' + crop.id + '" src="' + canvas.toDataURL("image/jpeg", 1) + '"></div>';
картинки с рамкой - скриншоты с экрана, то как выглядит картинка после позиционирования
без рамки - после обрезки canvas
PS
кроссбраузерность не нужна, хром, мозилла(показан результат в хроме)
PSPS
а в мозиле данный код не работает...
для желающих проверить - могу выслать весь код странички.