Fabric.js Resize object not working properly
0
I am unable to resize object I am using two inputs from where I get new width and height and the use that input value as new height and with for Active Object and object container is resizing but content is not.
(function() {
var canvas = this.__canvas = new fabric.Canvas('canvas');
var imgURL = 'http://i.imgur.com/8rmMZI3.jpg';
// create a rectangle with a fill and a different color stroke
var pugImg = new Image();
pugImg.onload = function (img) {
var pug = new fabric.Image(pugImg, {
width: 500,
height: 500,
left: 50,
top: 70,
scaleX: .25,
scaleY: .25
});
canvas.add(pug);
};
pugImg.src = imgURL;
canvas.renderAll();
$('#objSetterWidth, #objSetterHeight').bind('input', function() {
o = canvas.getActiveObject();
w = $('#objSetterWidth').val();
h = $('#objSetterHeight').val();
o.width = w / o.scaleX
o.height = h / o.scaleY
o.setCoords();
canvas.renderAll();
});
})();<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/2.4.3/fabric.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-group col-md-6">
<input type="number" class="form-control form-control-sm" placeholder="Width" id="objSetterWidth">
</div>
<div class="form-group col-md-6">
<input type="number" class="form-control form-control-sm" placeholder="Height" id="objSetterHeight">
</div>
<canvas id="canvas" width="800" height="600"></canvas>javascript jquery fabricjs
edited Nov 23 '18 at 18:41
Zoe
11.6k74379
asked Nov 23 '18 at 9:17
sam999sam999
507
add a comment |
0
I am unable to resize object I am using two inputs from where I get new width and height and the use that input value as new height and with for Active Object and object container is resizing but content is not.
(function() {
var canvas = this.__canvas = new fabric.Canvas('canvas');
var imgURL = 'http://i.imgur.com/8rmMZI3.jpg';
// create a rectangle with a fill and a different color stroke
var pugImg = new Image();
pugImg.onload = function (img) {
var pug = new fabric.Image(pugImg, {
width: 500,
height: 500,
left: 50,
top: 70,
scaleX: .25,
scaleY: .25
});
canvas.add(pug);
};
pugImg.src = imgURL;
canvas.renderAll();
$('#objSetterWidth, #objSetterHeight').bind('input', function() {
o = canvas.getActiveObject();
w = $('#objSetterWidth').val();
h = $('#objSetterHeight').val();
o.width = w / o.scaleX
o.height = h / o.scaleY
o.setCoords();
canvas.renderAll();
});
})();<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/2.4.3/fabric.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-group col-md-6">
<input type="number" class="form-control form-control-sm" placeholder="Width" id="objSetterWidth">
</div>
<div class="form-group col-md-6">
<input type="number" class="form-control form-control-sm" placeholder="Height" id="objSetterHeight">
</div>
<canvas id="canvas" width="800" height="600"></canvas>javascript jquery fabricjs
edited Nov 23 '18 at 18:41
Zoe
11.6k74379
asked Nov 23 '18 at 9:17
sam999sam999
507
Please don't put links to the code. Instead, type-in the relevant code snippets in your question.
– Andreas
Nov 23 '18 at 9:18
Can you add the code on the message body please
– veben
Nov 23 '18 at 9:19
yes i added the code
– sam999
Nov 23 '18 at 9:21
add a comment |
0
0
0
I am unable to resize object I am using two inputs from where I get new width and height and the use that input value as new height and with for Active Object and object container is resizing but content is not.
(function() {
var canvas = this.__canvas = new fabric.Canvas('canvas');
var imgURL = 'http://i.imgur.com/8rmMZI3.jpg';
// create a rectangle with a fill and a different color stroke
var pugImg = new Image();
pugImg.onload = function (img) {
var pug = new fabric.Image(pugImg, {
width: 500,
height: 500,
left: 50,
top: 70,
scaleX: .25,
scaleY: .25
});
canvas.add(pug);
};
pugImg.src = imgURL;
canvas.renderAll();
$('#objSetterWidth, #objSetterHeight').bind('input', function() {
o = canvas.getActiveObject();
w = $('#objSetterWidth').val();
h = $('#objSetterHeight').val();
o.width = w / o.scaleX
o.height = h / o.scaleY
o.setCoords();
canvas.renderAll();
});
})();<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/2.4.3/fabric.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-group col-md-6">
<input type="number" class="form-control form-control-sm" placeholder="Width" id="objSetterWidth">
</div>
<div class="form-group col-md-6">
<input type="number" class="form-control form-control-sm" placeholder="Height" id="objSetterHeight">
</div>
<canvas id="canvas" width="800" height="600"></canvas>javascript jquery fabricjs
edited Nov 23 '18 at 18:41
Zoe
11.6k74379
asked Nov 23 '18 at 9:17
sam999sam999
507
I am unable to resize object I am using two inputs from where I get new width and height and the use that input value as new height and with for Active Object and object container is resizing but content is not.
(function() {
var canvas = this.__canvas = new fabric.Canvas('canvas');
var imgURL = 'http://i.imgur.com/8rmMZI3.jpg';
// create a rectangle with a fill and a different color stroke
var pugImg = new Image();
pugImg.onload = function (img) {
var pug = new fabric.Image(pugImg, {
width: 500,
height: 500,
left: 50,
top: 70,
scaleX: .25,
scaleY: .25
});
canvas.add(pug);
};
pugImg.src = imgURL;
canvas.renderAll();
$('#objSetterWidth, #objSetterHeight').bind('input', function() {
o = canvas.getActiveObject();
w = $('#objSetterWidth').val();
h = $('#objSetterHeight').val();
o.width = w / o.scaleX
o.height = h / o.scaleY
o.setCoords();
canvas.renderAll();
});
})();<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/2.4.3/fabric.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-group col-md-6">
<input type="number" class="form-control form-control-sm" placeholder="Width" id="objSetterWidth">
</div>
<div class="form-group col-md-6">
<input type="number" class="form-control form-control-sm" placeholder="Height" id="objSetterHeight">
</div>
<canvas id="canvas" width="800" height="600"></canvas>(function() {
var canvas = this.__canvas = new fabric.Canvas('canvas');
var imgURL = 'http://i.imgur.com/8rmMZI3.jpg';
// create a rectangle with a fill and a different color stroke
var pugImg = new Image();
pugImg.onload = function (img) {
var pug = new fabric.Image(pugImg, {
width: 500,
height: 500,
left: 50,
top: 70,
scaleX: .25,
scaleY: .25
});
canvas.add(pug);
};
pugImg.src = imgURL;
canvas.renderAll();
$('#objSetterWidth, #objSetterHeight').bind('input', function() {
o = canvas.getActiveObject();
w = $('#objSetterWidth').val();
h = $('#objSetterHeight').val();
o.width = w / o.scaleX
o.height = h / o.scaleY
o.setCoords();
canvas.renderAll();
});
})();<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/2.4.3/fabric.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-group col-md-6">
<input type="number" class="form-control form-control-sm" placeholder="Width" id="objSetterWidth">
</div>
<div class="form-group col-md-6">
<input type="number" class="form-control form-control-sm" placeholder="Height" id="objSetterHeight">
</div>
<canvas id="canvas" width="800" height="600"></canvas>(function() {
var canvas = this.__canvas = new fabric.Canvas('canvas');
var imgURL = 'http://i.imgur.com/8rmMZI3.jpg';
// create a rectangle with a fill and a different color stroke
var pugImg = new Image();
pugImg.onload = function (img) {
var pug = new fabric.Image(pugImg, {
width: 500,
height: 500,
left: 50,
top: 70,
scaleX: .25,
scaleY: .25
});
canvas.add(pug);
};
pugImg.src = imgURL;
canvas.renderAll();
$('#objSetterWidth, #objSetterHeight').bind('input', function() {
o = canvas.getActiveObject();
w = $('#objSetterWidth').val();
h = $('#objSetterHeight').val();
o.width = w / o.scaleX
o.height = h / o.scaleY
o.setCoords();
canvas.renderAll();
});
})();<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/2.4.3/fabric.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-group col-md-6">
<input type="number" class="form-control form-control-sm" placeholder="Width" id="objSetterWidth">
</div>
<div class="form-group col-md-6">
<input type="number" class="form-control form-control-sm" placeholder="Height" id="objSetterHeight">
</div>
<canvas id="canvas" width="800" height="600"></canvas>javascript jquery fabricjs
javascript jquery fabricjs
edited Nov 23 '18 at 18:41
Zoe
11.6k74379
asked Nov 23 '18 at 9:17
sam999sam999
507
edited Nov 23 '18 at 18:41
Zoe
11.6k74379
asked Nov 23 '18 at 9:17
sam999sam999
507
edited Nov 23 '18 at 18:41
Zoe
11.6k74379
edited Nov 23 '18 at 18:41
Zoe
11.6k74379
edited Nov 23 '18 at 18:41
Zoe
11.6k74379
11.6k74379
asked Nov 23 '18 at 9:17
sam999sam999
507
asked Nov 23 '18 at 9:17
sam999sam999
507
asked Nov 23 '18 at 9:17
sam999sam999
507
507
Please don't put links to the code. Instead, type-in the relevant code snippets in your question.
– Andreas
Nov 23 '18 at 9:18
Can you add the code on the message body please
– veben
Nov 23 '18 at 9:19
yes i added the code
– sam999
Nov 23 '18 at 9:21
add a comment |
Please don't put links to the code. Instead, type-in the relevant code snippets in your question.
– Andreas
Nov 23 '18 at 9:18
Can you add the code on the message body please
– veben
Nov 23 '18 at 9:19
yes i added the code
– sam999
Nov 23 '18 at 9:21
Please don't put links to the code. Instead, type-in the relevant code snippets in your question.
– Andreas
Nov 23 '18 at 9:18
Please don't put links to the code. Instead, type-in the relevant code snippets in your question.
– Andreas
Nov 23 '18 at 9:18
Can you add the code on the message body please
– veben
Nov 23 '18 at 9:19
Can you add the code on the message body please
– veben
Nov 23 '18 at 9:19
yes i added the code
– sam999
Nov 23 '18 at 9:21
yes i added the code
– sam999
Nov 23 '18 at 9:21
add a comment |
1 Answer
1
active
oldest
votes
1
This is what width/height do - they don't resize the original image but rather resize the container, effectively 'cropping' the original image. What you want to do is let fabric set the width and height according to the image's original dimensions and scale the object - this way you'll affect both image container and the image itself. You also don't need to pass width and height into Image constructor. If you want to add an image and scale to a particular size right away, use scaleToWidth() or scaleToHeight().
Anyway, here's the code to resize the image via inputs:
(function() {
var canvas = this.__canvas = new fabric.Canvas('canvas');
var imgURL = 'http://i.imgur.com/8rmMZI3.jpg';
// create a rectangle with a fill and a different color stroke
var pugImg = new Image();
pugImg.onload = function (img) {
var pug = new fabric.Image(pugImg, {
//width: 500, //- you don't need this unless you want to 'crop'
//height: 500, //- you don't need this unless you want to 'crop'
left: 50,
top: 70,
scaleX: .25,
scaleY: .25
});
canvas.add(pug);
canvas.renderAll();
};
pugImg.src = imgURL;
$('#objSetterWidth, #objSetterHeight').bind('input', function() {
var o = canvas.getActiveObject();
// if no object selected, do nothing
if (!o) {
return
}
var w = $('#objSetterWidth').val();
var h = $('#objSetterHeight').val();
// get the original image dimensions
var originalW = o.getOriginalSize().width;
var originalH = o.getOriginalSize().height;
// if w input is empty, don't scale width
if (w) {
o.set('scaleX', w / originalW);
}
// if h input is empty, don't scale height
if (h) {
o.set('scaleY', h / originalH);
}
o.setCoords();
canvas.renderAll();
});
})();<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/2.4.3/fabric.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-group col-md-6">
<input type="number" class="form-control form-control-sm" placeholder="Width" id="objSetterWidth">
</div>
<div class="form-group col-md-6">
<input type="number" class="form-control form-control-sm" placeholder="Height" id="objSetterHeight">
</div>
<canvas id="canvas" width="800" height="600"></canvas>answered Nov 23 '18 at 17:22
shkapershkaper
1,181714
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53443688%2ffabric-js-resize-object-not-working-properly%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
1
This is what width/height do - they don't resize the original image but rather resize the container, effectively 'cropping' the original image. What you want to do is let fabric set the width and height according to the image's original dimensions and scale the object - this way you'll affect both image container and the image itself. You also don't need to pass width and height into Image constructor. If you want to add an image and scale to a particular size right away, use scaleToWidth() or scaleToHeight().
Anyway, here's the code to resize the image via inputs:
(function() {
var canvas = this.__canvas = new fabric.Canvas('canvas');
var imgURL = 'http://i.imgur.com/8rmMZI3.jpg';
// create a rectangle with a fill and a different color stroke
var pugImg = new Image();
pugImg.onload = function (img) {
var pug = new fabric.Image(pugImg, {
//width: 500, //- you don't need this unless you want to 'crop'
//height: 500, //- you don't need this unless you want to 'crop'
left: 50,
top: 70,
scaleX: .25,
scaleY: .25
});
canvas.add(pug);
canvas.renderAll();
};
pugImg.src = imgURL;
$('#objSetterWidth, #objSetterHeight').bind('input', function() {
var o = canvas.getActiveObject();
// if no object selected, do nothing
if (!o) {
return
}
var w = $('#objSetterWidth').val();
var h = $('#objSetterHeight').val();
// get the original image dimensions
var originalW = o.getOriginalSize().width;
var originalH = o.getOriginalSize().height;
// if w input is empty, don't scale width
if (w) {
o.set('scaleX', w / originalW);
}
// if h input is empty, don't scale height
if (h) {
o.set('scaleY', h / originalH);
}
o.setCoords();
canvas.renderAll();
});
})();<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/2.4.3/fabric.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-group col-md-6">
<input type="number" class="form-control form-control-sm" placeholder="Width" id="objSetterWidth">
</div>
<div class="form-group col-md-6">
<input type="number" class="form-control form-control-sm" placeholder="Height" id="objSetterHeight">
</div>
<canvas id="canvas" width="800" height="600"></canvas>answered Nov 23 '18 at 17:22
shkapershkaper
1,181714
add a comment |
1
This is what width/height do - they don't resize the original image but rather resize the container, effectively 'cropping' the original image. What you want to do is let fabric set the width and height according to the image's original dimensions and scale the object - this way you'll affect both image container and the image itself. You also don't need to pass width and height into Image constructor. If you want to add an image and scale to a particular size right away, use scaleToWidth() or scaleToHeight().
Anyway, here's the code to resize the image via inputs:
(function() {
var canvas = this.__canvas = new fabric.Canvas('canvas');
var imgURL = 'http://i.imgur.com/8rmMZI3.jpg';
// create a rectangle with a fill and a different color stroke
var pugImg = new Image();
pugImg.onload = function (img) {
var pug = new fabric.Image(pugImg, {
//width: 500, //- you don't need this unless you want to 'crop'
//height: 500, //- you don't need this unless you want to 'crop'
left: 50,
top: 70,
scaleX: .25,
scaleY: .25
});
canvas.add(pug);
canvas.renderAll();
};
pugImg.src = imgURL;
$('#objSetterWidth, #objSetterHeight').bind('input', function() {
var o = canvas.getActiveObject();
// if no object selected, do nothing
if (!o) {
return
}
var w = $('#objSetterWidth').val();
var h = $('#objSetterHeight').val();
// get the original image dimensions
var originalW = o.getOriginalSize().width;
var originalH = o.getOriginalSize().height;
// if w input is empty, don't scale width
if (w) {
o.set('scaleX', w / originalW);
}
// if h input is empty, don't scale height
if (h) {
o.set('scaleY', h / originalH);
}
o.setCoords();
canvas.renderAll();
});
})();<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/2.4.3/fabric.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-group col-md-6">
<input type="number" class="form-control form-control-sm" placeholder="Width" id="objSetterWidth">
</div>
<div class="form-group col-md-6">
<input type="number" class="form-control form-control-sm" placeholder="Height" id="objSetterHeight">
</div>
<canvas id="canvas" width="800" height="600"></canvas>answered Nov 23 '18 at 17:22
shkapershkaper
1,181714
add a comment |
1
1
1
This is what width/height do - they don't resize the original image but rather resize the container, effectively 'cropping' the original image. What you want to do is let fabric set the width and height according to the image's original dimensions and scale the object - this way you'll affect both image container and the image itself. You also don't need to pass width and height into Image constructor. If you want to add an image and scale to a particular size right away, use scaleToWidth() or scaleToHeight().
Anyway, here's the code to resize the image via inputs:
(function() {
var canvas = this.__canvas = new fabric.Canvas('canvas');
var imgURL = 'http://i.imgur.com/8rmMZI3.jpg';
// create a rectangle with a fill and a different color stroke
var pugImg = new Image();
pugImg.onload = function (img) {
var pug = new fabric.Image(pugImg, {
//width: 500, //- you don't need this unless you want to 'crop'
//height: 500, //- you don't need this unless you want to 'crop'
left: 50,
top: 70,
scaleX: .25,
scaleY: .25
});
canvas.add(pug);
canvas.renderAll();
};
pugImg.src = imgURL;
$('#objSetterWidth, #objSetterHeight').bind('input', function() {
var o = canvas.getActiveObject();
// if no object selected, do nothing
if (!o) {
return
}
var w = $('#objSetterWidth').val();
var h = $('#objSetterHeight').val();
// get the original image dimensions
var originalW = o.getOriginalSize().width;
var originalH = o.getOriginalSize().height;
// if w input is empty, don't scale width
if (w) {
o.set('scaleX', w / originalW);
}
// if h input is empty, don't scale height
if (h) {
o.set('scaleY', h / originalH);
}
o.setCoords();
canvas.renderAll();
});
})();<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/2.4.3/fabric.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-group col-md-6">
<input type="number" class="form-control form-control-sm" placeholder="Width" id="objSetterWidth">
</div>
<div class="form-group col-md-6">
<input type="number" class="form-control form-control-sm" placeholder="Height" id="objSetterHeight">
</div>
<canvas id="canvas" width="800" height="600"></canvas>answered Nov 23 '18 at 17:22
shkapershkaper
1,181714
This is what width/height do - they don't resize the original image but rather resize the container, effectively 'cropping' the original image. What you want to do is let fabric set the width and height according to the image's original dimensions and scale the object - this way you'll affect both image container and the image itself. You also don't need to pass width and height into Image constructor. If you want to add an image and scale to a particular size right away, use scaleToWidth() or scaleToHeight().
Anyway, here's the code to resize the image via inputs:
(function() {
var canvas = this.__canvas = new fabric.Canvas('canvas');
var imgURL = 'http://i.imgur.com/8rmMZI3.jpg';
// create a rectangle with a fill and a different color stroke
var pugImg = new Image();
pugImg.onload = function (img) {
var pug = new fabric.Image(pugImg, {
//width: 500, //- you don't need this unless you want to 'crop'
//height: 500, //- you don't need this unless you want to 'crop'
left: 50,
top: 70,
scaleX: .25,
scaleY: .25
});
canvas.add(pug);
canvas.renderAll();
};
pugImg.src = imgURL;
$('#objSetterWidth, #objSetterHeight').bind('input', function() {
var o = canvas.getActiveObject();
// if no object selected, do nothing
if (!o) {
return
}
var w = $('#objSetterWidth').val();
var h = $('#objSetterHeight').val();
// get the original image dimensions
var originalW = o.getOriginalSize().width;
var originalH = o.getOriginalSize().height;
// if w input is empty, don't scale width
if (w) {
o.set('scaleX', w / originalW);
}
// if h input is empty, don't scale height
if (h) {
o.set('scaleY', h / originalH);
}
o.setCoords();
canvas.renderAll();
});
})();<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/2.4.3/fabric.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-group col-md-6">
<input type="number" class="form-control form-control-sm" placeholder="Width" id="objSetterWidth">
</div>
<div class="form-group col-md-6">
<input type="number" class="form-control form-control-sm" placeholder="Height" id="objSetterHeight">
</div>
<canvas id="canvas" width="800" height="600"></canvas>(function() {
var canvas = this.__canvas = new fabric.Canvas('canvas');
var imgURL = 'http://i.imgur.com/8rmMZI3.jpg';
// create a rectangle with a fill and a different color stroke
var pugImg = new Image();
pugImg.onload = function (img) {
var pug = new fabric.Image(pugImg, {
//width: 500, //- you don't need this unless you want to 'crop'
//height: 500, //- you don't need this unless you want to 'crop'
left: 50,
top: 70,
scaleX: .25,
scaleY: .25
});
canvas.add(pug);
canvas.renderAll();
};
pugImg.src = imgURL;
$('#objSetterWidth, #objSetterHeight').bind('input', function() {
var o = canvas.getActiveObject();
// if no object selected, do nothing
if (!o) {
return
}
var w = $('#objSetterWidth').val();
var h = $('#objSetterHeight').val();
// get the original image dimensions
var originalW = o.getOriginalSize().width;
var originalH = o.getOriginalSize().height;
// if w input is empty, don't scale width
if (w) {
o.set('scaleX', w / originalW);
}
// if h input is empty, don't scale height
if (h) {
o.set('scaleY', h / originalH);
}
o.setCoords();
canvas.renderAll();
});
})();<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/2.4.3/fabric.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-group col-md-6">
<input type="number" class="form-control form-control-sm" placeholder="Width" id="objSetterWidth">
</div>
<div class="form-group col-md-6">
<input type="number" class="form-control form-control-sm" placeholder="Height" id="objSetterHeight">
</div>
<canvas id="canvas" width="800" height="600"></canvas>(function() {
var canvas = this.__canvas = new fabric.Canvas('canvas');
var imgURL = 'http://i.imgur.com/8rmMZI3.jpg';
// create a rectangle with a fill and a different color stroke
var pugImg = new Image();
pugImg.onload = function (img) {
var pug = new fabric.Image(pugImg, {
//width: 500, //- you don't need this unless you want to 'crop'
//height: 500, //- you don't need this unless you want to 'crop'
left: 50,
top: 70,
scaleX: .25,
scaleY: .25
});
canvas.add(pug);
canvas.renderAll();
};
pugImg.src = imgURL;
$('#objSetterWidth, #objSetterHeight').bind('input', function() {
var o = canvas.getActiveObject();
// if no object selected, do nothing
if (!o) {
return
}
var w = $('#objSetterWidth').val();
var h = $('#objSetterHeight').val();
// get the original image dimensions
var originalW = o.getOriginalSize().width;
var originalH = o.getOriginalSize().height;
// if w input is empty, don't scale width
if (w) {
o.set('scaleX', w / originalW);
}
// if h input is empty, don't scale height
if (h) {
o.set('scaleY', h / originalH);
}
o.setCoords();
canvas.renderAll();
});
})();<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/2.4.3/fabric.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-group col-md-6">
<input type="number" class="form-control form-control-sm" placeholder="Width" id="objSetterWidth">
</div>
<div class="form-group col-md-6">
<input type="number" class="form-control form-control-sm" placeholder="Height" id="objSetterHeight">
</div>
<canvas id="canvas" width="800" height="600"></canvas>answered Nov 23 '18 at 17:22
shkapershkaper
1,181714
answered Nov 23 '18 at 17:22
shkapershkaper
1,181714
answered Nov 23 '18 at 17:22
shkapershkaper
1,181714
answered Nov 23 '18 at 17:22
shkapershkaper
1,181714
1,181714
add a comment |
add a comment |
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53443688%2ffabric-js-resize-object-not-working-properly%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Please don't put links to the code. Instead, type-in the relevant code snippets in your question.
– Andreas
Nov 23 '18 at 9:18
Can you add the code on the message body please
– veben
Nov 23 '18 at 9:19
yes i added the code
– sam999
Nov 23 '18 at 9:21