if click on "run code snippet" or if check here, can see lot of empty space in beginning, once scroll down can see images.
i want hide empty space in top.
i tried position:relative; top: px; bottom: px; didt worked 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 = 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"; //^^ start loading 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 { 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>
you have change top position canvas container 900 lower value.
see 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 = 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"; //^^ start loading 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 { 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>
Comments
Post a Comment