jquery - jqueryを使用して画像のサイズを変更し、位置をドラッグし、出力をhtmlに保存します

Question

画像を取り、その上にPNG透明マスクを置き、画像を拡大縮小してドラッグして、マスク内に完全に配置/サイズ変更できる小さなツールを構築しようとしています。

ここにjqueryがあります。

$(window).load(function(){
var globalElement_width;
var globalElement_height;
$(document).ready(function(){
$img=$('.canvas img');
globalElement_width=$img.width();
globalElement_height=$img.height();

$( ".slider" ).slider({
    step: 1, 
    min: 0,
    max: 100,
    value: 0,
    slide: function( event, ui )
    {
        resize_img(ui.value);
    }
});

$('.canvas img').draggable();

});
function resize_img(val) {
var width=globalElement_width;
var zoom_percen=width * 0.5; // Maximum zoom 50%
var ASPECT = zoom_percen / 50;
var zoom_value = val / 2;
var size= width + ASPECT * zoom_value;

$img = $('.canvas img');
$img.stop(true).animate({
    width: size
}, 1);
}

});

私には2つの問題があります（おそらくコードがかなりぎこちないことに加えて）

1. 画像を最初にマスクの後ろに実際のサイズを中央にロードし、スライダーで現在のように大きくではなく、小さくスケーリングできるようにします。歪みを避けるために、画像が実際の寸法を超えないようにしたいと考えています。スライダーは、右にスライドするのではなく、左にスライドしてサイズを小さくする必要があります。

2. 配置を正しくしたら、ボタンをクリックして、新しくサイズ変更および配置されたグラフィックの新しい HTML/CSS/JS を出力できるようにしたいと考えています。次に、このコードを取得してサイトに配置し、UX を使用せずに画像とマスクを表示して、サイズ変更/配置などを行うことができます。私が生成した正確な状態でハードコーディングされています。

どんな助けでも大歓迎です...これは、さまざまなコードを一緒にまとめることができる限りです。また、私が持っているもののクリーンアップに関する提案も奨励されています。

ありがとう！