CODEWITHSUNDEEP
javascripthtmlcss
fresher
fresher

Reputation: 911

Hide the empty space present on top of the page

If you click on "Run code Snippet" or if you check here, you can see lot of empty space in beginning, once we scroll down than only we can see the images.

I want to hide those empty space in top.

I tried position:relative; top: some px; bottom: some px; but it didt worked for me.

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);
	  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);
});


var img = new Image();
img.onload = function() {
  //draw after loading
  var canvas = document.getElementById('case_canvas');
  var ctx = canvas.getContext("2d");
  ctx.drawImage(img, 0, 0, img.naturalWidth, img.naturalHeight);
}

img.src = "https://i.sstatic.net/xgNw7.png";
//^^ this will start loading the image
/*.canvas-container {
  background: url("https://i.sstatic.net/xgNw7.png") no-repeat fixed center;

  }
  */
 
 .canvas-container {
 width: 300px; height: 500px;  position: relative; -webkit-user-select: none; top:900px;
 }
 
 #canvas
 {
  border: 1px solid black;
  top:500px;
}

#file
{
	position:relative;top:900px;
}

.lower-canvas

{
	position: absolute; width: 300px; height: 500px; bottom:400px; left: 0px; -webkit-user-select: none;
}

.upper-canvas {
position: absolute; width: 300px; height: 500px; left: 0px; top: 0px; -webkit-user-select: none; cursor: default;
}
<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>	

<div class="canvas-container">
<canvas id="case_canvas" width="300" height="500" class="lower-canvas" ></canvas>
<canvas class="upper-canvas " width="300" height="500" ></canvas>
</div>

Upvotes: 0

Views: 48

Answers (1)

Vladu Ionut
Vladu Ionut

Reputation: 8193

You have to change the top position for canvas container from 900 to a lower value.

See the bellow snippet

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);
	  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);
});


var img = new Image();
img.onload = function() {
  //draw after loading
  var canvas = document.getElementById('case_canvas');
  var ctx = canvas.getContext("2d");
  ctx.drawImage(img, 0, 0, img.naturalWidth, img.naturalHeight);
}

img.src = "https://i.sstatic.net/xgNw7.png";
//^^ this will start loading the image
/*.canvas-container {
  background: url("https://i.sstatic.net/xgNw7.png") no-repeat fixed center;

  }
  */
 
 .canvas-container {
 width: 300px; height: 500px;  position: relative; -webkit-user-select: none; top:0px;
 }
 
 #canvas
 {
  border: 1px solid black;
  top:500px;
}

#file
{
	position:relative;top:0px;
}

.lower-canvas

{
	position: absolute; width: 300px; height: 500px; bottom:400px; left: 0px; -webkit-user-select: none;
}

.upper-canvas {
position: absolute; width: 300px; height: 500px; left: 0px; top: 0px; -webkit-user-select: none; cursor: default;
}
<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>	

<div class="canvas-container">
<canvas id="case_canvas" width="300" height="500" class="lower-canvas" ></canvas>
<canvas class="upper-canvas " width="300" height="500" ></canvas>
</div>

Upvotes: 3

Related Questions