The image occupies only a small space inside the box

Question

We use https://stackoverflow.com>

after we unload it, taking only a small part in the field here .

But the image should occupy a full box.

var canvas = new fabric.Canvas('canvas'); document.getElementById('file').addEventListener("change", function (e) { var file = e.target.files[0]; var reader = new FileReader(); reader.onload = function (f) { var data = f.target.result; fabric.Image.fromURL(data, function (img) { var oImg = img.set({left: 0, top: 0, angle: 00,width:100, height:100}).scale(0.9); canvas.add(oImg).renderAll(); var a = canvas.setActiveObject(oImg); var dataURL = canvas.toDataURL({format: 'png', quality: 0.8}); }); }; reader.readAsDataURL(file); }); 

 canvas{ border: 1px solid black; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://rawgit.com/kangax/fabric.js/master/dist/fabric.min.js"></script> <input type="file" id="file"><br /> <canvas id="canvas" width="450" height="450"></canvas> 

Answer 1

Replace string

 var oImg = img.set({left: 0, top: 0, angle: 00,width:100, height:100}).scale(0.9); 

from

 var oImg = img.set({left: 0, top: 0, angle: 00, width: canvas.getWidth(), height: canvas.getHeight()}); 

This is what limited the size of your image. In addition, I do not know why you have a scale there, but if you save it as .scale(0.9) , it will not fill the entire box. Instead, it will fill only 90% of its width and height.

Excerpt

 var canvas = new fabric.Canvas('canvas'); document.getElementById('file').addEventListener("change", function (e) { var file = e.target.files[0]; var reader = new FileReader(); reader.onload = function (f) { var data = f.target.result; fabric.Image.fromURL(data, function (img) { var oImg = img.set({left: 0, top: 0, angle: 00,width:canvas.getWidth(), height:canvas.getHeight()}); canvas.add(oImg).renderAll(); var a = canvas.setActiveObject(oImg); var dataURL = canvas.toDataURL({format: 'png', quality: 0.8}); }); }; reader.readAsDataURL(file); }); 

 canvas{ border: 1px solid black; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://rawgit.com/kangax/fabric.js/master/dist/fabric.min.js"></script> <input type="file" id="file"><br /> <canvas id="canvas" width="450" height="450"></canvas> Run code snippet