图像只占用箱子里的一点空间 [英] Image is occupying only in little space inside box

问题描述

我们正在使用

  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}）。 add（oImg）.renderAll（）; var a = canvas.setActiveObject（oImg）; var dataURL = canvas.toDataURL（{format：'png'，quality：0.8}）;}）; }; reader.readAsDataURL（file）;}）;  

<{class =snippet-code-css lang-css prettyprint-override 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 =fileid =file>< br / width =450height =450>< / canvas>  

解决方案

替换行

  var oImg = img.set ：0，顶部：0，角度：00，宽度：100，高度：100}）。 
  

  var oImg = img.set（{left：0，top：0，angle：00，width：canvas.getWidth（），height：canvas.getHeight（）}）; 
  

这是限制图片大小的原因。另外，我不知道为什么你有规模 - 但如果你保持它 .scale（0.9），它不会填充整个框。

$ b

  var canvas = new fabric.Canvas（'canvas'）; document.getElementById（'file'）。addEventListener （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：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）;}）; / code> 

  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 =fileid =file>< br />< canvas id =canvaswidth =450height =450> ;< / canvas>运行代码段 

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.

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>

解决方案

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.

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

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>
 Run code snippet

这篇关于图像只占用箱子里的一点空间的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！