fabric.jsを利用して画像サイズ変更ツールを作成したい

いつもお世話になっております。
今回fabric.jsを利用したWebでの画像サイズ変更ツールを作成しておりますが
期待している値が取れず皆様のお力添えをいただければと思っておりました。

前提・実現したいこと

fabric.jsを利用して画像リサイズツールを作成したい
・画像を枠を拡大拡小しサイズを変更（この時テキストボックスの入力値も変更）
・テキストボックスに入力されたwidth,heightを画像に反映させサイズが変更される
・鍵マークが表示されている間はアスペクト比を維持して画像のサイズを変更
・編集画像をリサイズし、表示範囲をプレビューcanvasに表示する

発生している問題・エラーメッセージ

・アスペクト比を維持せずリサイズ→アスペクト比を維持してリサイズした時編集する前の画像サイズに一度戻る
・プレビュー画面に初期表示はうまくできるがリサイズ後の画像がうまく表示されない

該当のソースコード

jquery
1var canvas;
2var imageData;
3var imgWidth;
4var imgHeight;
5var ratio;
6var isLock = 1;
7var prevWidth = parseInt(document.getElementById('previewCanvas').style.width, 10) -3;
8var prevHeight = parseInt(document.getElementById('previewCanvas').style.height, 10) -3;
9var advtWidth = parseInt(document.getElementById('advertisementWidth').value, 10);
10var advtHeight = parseInt(document.getElementById('advertisementHeight').value, 10);
11
12$(function(){
13    canvas = new fabric.Canvas('cnvs');
14    fabric.Object.prototype.transparentCorners = false;
15
16    fabric.Image.fromURL('/images/Common/logo.png', function(oImg) {
17        oImg.set('left', 40);
18        oImg.set('top', 250);
19        imageData = oImg;
20        canvas.add(oImg);
21
22        imgWidth = Math.round(imageData.width * imageData.scaleX);
23        imgHeight = Math.round(imageData.height * imageData.scaleY);
24        previewBorder();
25        prevCnvs(oImg);
26        document.getElementById('imgWidth').value = imgWidth;
27        document.getElementById('imgHeight').value = imgHeight;
28    });
29
30    canvas.on({
31        'object:modified': displayCnvs,
32    });
33
34    function displayCnvs() {
35        imgWidth = Math.round(imageData.width * imageData.scaleX);
36        imgHeight = Math.round(imageData.height * imageData.scaleY);
37        document.getElementById('imgWidth').value = imgWidth;
38        document.getElementById('imgHeight').value = imgHeight;
39        previewBorder();
40        prevCnvs(imageData);
41    }
42});
43
44//テキストボックスの値を反映
45$(function(){
46    $('#imgWidth').change(function () {
47        if(isLock == 1){
48            var inputWidth = parseInt(document.getElementById('imgWidth').value,10);
49            aspectResize(inputWidth, imageData.width);
50            return false;
51        }
52        resizeWidth(this.value);
53    });
54
55    $('#imgHeight').change(function () {
56        if(isLock == 1){
57            var inputHeight = parseInt(document.getElementById('imgHeight').value,10);
58            aspectResize(inputHeight, imageData.height);
59            return false;
60        }
61        resizeHeight(this.value);
62    });
63});
64//width(＋)(ー)ボタン
65$(function(){
66    $('#minusWidth').click(function () {
67        var inputWidth = intoImgSize('imgWidth',-1);
68        if(isLock == 1){
69            aspectResize(inputWidth, imageData.width);
70            return false;
71        }
72        resizeWidth(inputWidth);
73        return false;
74    });
75
76    $('#plusWidth').click(function () {
77        var inputWidth = intoImgSize('imgWidth',1);
78        if(isLock == 1){
79            aspectResize(inputWidth, imageData.width);
80            return false;
81        }
82        resizeWidth(inputWidth);
83        return false;
84    })
85});
86
87//height(＋)(ー)ボタン
88$(function(){
89    $('#minusHeight').click(function () {
90        var inputHeight = intoImgSize('imgHeight',-1);
91        if(isLock == 1){
92            aspectResize(inputHeight, imageData.height);
93            return false;
94        }
95        resizeHeight(inputHeight);
96        return false;
97    });
98
99    $('#plusHeight').click(function () {
100        var inputHeight = intoImgSize('imgHeight',1);
101        if(isLock == 1){
102            aspectResize(inputHeight, imageData.height);
103            return false;
104        }
105        resizeHeight(inputHeight);
106        return false;
107    })
108});
109
110//アスペクト比固定リサイズ
111$(function(){
112    $('#lockMinusSize').click(function () {
113        inputWidth = intoImgSize('imgWidth',-1);
114        aspectResize(inputWidth, imageData.width);
115        return false;
116    });
117
118    $('#lockPlusSize').click(function () {
119        inputWidth = intoImgSize('imgWidth',1);
120        aspectResize(inputWidth, imageData.width);
121        return false;
122    })
123});
124
125//鍵マーク表示切り替え
126$(function(){
127    $('#lockImgTd').click(function () {
128        var hidden = document.getElementById('lockImg').hidden;
129        if(hidden){
130            document.getElementById('lockImg').hidden = false;
131            isLock = 1;
132        }else{
133            document.getElementById('lockImg').hidden = true;
134            isLock = 0;
135        }
136    })
137});
138
139function intoImgSize(thisId,afterSize) {
140    inputSize = parseInt(document.getElementById(thisId).value,10);
141    inputSize = inputSize + afterSize;
142    return inputSize
143}
144
145function resizeWidth(inputWidth) {
146    imageData.scaleX = inputWidth / imageData.width;
147    canvas.requestRenderAll();
148    imgWidth = Math.round(imageData.width * imageData.scaleX);
149    document.getElementById('imgWidth').value = imgWidth;
150    previewBorder();
151}
152
153function resizeHeight(inputHeight) {
154    imageData.scaleY = inputHeight / imageData.height;
155    canvas.requestRenderAll();
156    imgHeight = Math.round(imageData.height * imageData.scaleY);
157    document.getElementById('imgHeight').value = imgHeight;
158    previewBorder();
159}
160
161function aspectResize(inputSize,imgSize){
162    imageData.scale(parseFloat(inputSize/imgSize)).setCoords();
163    canvas.requestRenderAll();
164    imgWidth = Math.round(imageData.width * imageData.scaleX);
165    imgHeight = Math.round(imageData.height * imageData.scaleY);
166    document.getElementById('imgWidth').value = imgWidth;
167    document.getElementById('imgHeight').value = imgHeight;
168    previewBorder();
169}
170
171function previewBorder(){
172    if(imgWidth <= prevWidth && imgHeight <= prevHeight){
173        document.getElementById('previewCanvas').style.borderColor = '#01983e';
174    }else{
175        document.getElementById('previewCanvas').style.borderColor = 'red';
176    }
177}
178var flg = 0;
179function prevCnvs(img) {
180    var prevCnvs = document.getElementById('previewImg');
181    var context = prevCnvs.getContext('2d');
182    var prevWidth = prevCnvs.width;
183    var prevHeight = prevCnvs.height;
184    var cnvsWidth = imgWidth;
185    var cnvsHeight = imgHeight;
186    if(flg == 1){
187        context.clearRect(0, 0, prevWidth, prevHeight);
188    }
189
190    if(advtWidth < imgWidth){
191        cnvsWidth = cnvsWidth - (imgWidth - advtWidth);
192    }else{
193        prevWidth = prevWidth - (advtWidth - imgWidth);
194    }
195    if(advtHeight < imgHeight){
196        cnvsHeight = cnvsHeight - (imgHeight - advtHeight);
197    }else {
198        prevHeight = prevHeight - (advtHeight - imgHeight);
199    }
200    context.drawImage(img._element, 0, 0, cnvsWidth, cnvsHeight, 0, 0, prevWidth, prevHeight);
201    flg = 1;
202}