Fabric.js Resize 对象无法正常工作

Question

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>

Answer 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>