nsdlfefinedieicbe nsdlfefinedieicbe - 4 months ago 12
HTML Question

Image is occupying only in little space inside box

We are using stackoverflow links code to upload image in a site

once we upload, its occupying only little part in box as here.

But image should occupy full box.

enter image description here



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

Replace the line

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

with

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

This is what was restricting your image size. Also, I don't know why you have the scale there - but if you keep it as .scale(0.9), it won't fill the whole box. Instead it will fill only 90% of its width and height.

Comments