隱藏頁面頂部的空白空間

Question

如果您點擊「運行代碼段」，或者如果您選中here，您可以在開始時看到很多空白區域，一旦我們向下滾動，只能看到圖片。

我想隱藏頂部的空白空間。我試過position:relative; top: some px; bottom: some px;，但它沒有爲我工作。

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); 
 
\t 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 = "http://i.stack.imgur.com/xgNw7.png"; 
 
//^^ this will start loading the image

/*.canvas-container { 
 
    background: url("http://i.stack.imgur.com/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 
 
{ 
 
\t position:relative;top:900px; 
 
} 
 

 
.lower-canvas 
 

 
{ 
 
\t 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> \t 
 

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

Answer 1

你必須從900改變爲畫布容器頂部位置爲較低的值。

見波紋管段

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); 
 
\t 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 = "http://i.stack.imgur.com/xgNw7.png"; 
 
//^^ this will start loading the image

/*.canvas-container { 
 
    background: url("http://i.stack.imgur.com/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 
 
{ 
 
\t position:relative;top:0px; 
 
} 
 

 
.lower-canvas 
 

 
{ 
 
\t 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> \t 
 

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