隐藏页面顶部的空白区域
Hide the empty space present on top of the page
如果您单击"运行代码段"或选中此处,您可以看到开头有很多空白,一旦我们向下滚动,就只能看到图像。
我想把那些空的地方藏起来。
我试过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);
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.stack.imgur.com/xgNw7.png";
//^^ this will start loading the image
/*.canvas-container {
background: url("https://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
{
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>
您必须将画布容器的顶部位置从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);
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.stack.imgur.com/xgNw7.png";
//^^ this will start loading the image
/*.canvas-container {
background: url("https://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
{
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>
相关文章:
- 当按下第二个按钮时如何隐藏按钮,以及当我点击页面的空白区域时如何使其出现
- 检测单击“空白”区域
- 如何在 FabricJS 中检测画布上的空白区域
- 如何通过Selenium IDE模拟鼠标点击网站上的空白区域
- 将不需要的页脚文本替换为空白区域
- 修剪标签上的空白区域,而不删除<输入>内部
- <节>后的空白区域
- 如何使空白区域可单击以显示文本
- 我的网站在移动版式镶版式右侧显示空白区域,但桌面版式版式显示空白区域
- 在扫雷中清理空白方块周围的区域时遇到问题
- 自动对焦保管箱中的空白区域,而不创建空选项
- 当我点击空白区域时,Jquery Mobile会出现奇怪的空间
- Firefox和Chrome页面底部的空白区域
- jquery validate和ajax post表单的验证表单空白文本区域出错
- 谷歌文档查看器给出了一个空白区域
- 如何排除空白区域的验证
- 隐藏页面顶部的空白区域
- 计算画布的空白区域
- javascript编程:如何在openlayers中删除tile映射的空白区域
- 保持textArea不缩小空白区域