图像仅占据盒子内的小空间答案

【问题标题】：Image is occupying only in little space inside box图像仅占据盒子内的小空间
【发布时间】：2016-12-02 21:53:52
【问题描述】：

我们正在使用stackoverflow links 代码在站点中上传图片

一旦我们上传，它在here的盒子里只占很小的一部分。

但是图片应该占满整个盒子。

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>

【问题讨论】：

为什么在设置时不用width 和height 450 而不是100？
@GuruprasadRao 更好，宽度和高度为canvas.getWidth() 和canvas.getHeight()，所以如果后期有人改变了画布的尺寸，他们也不需要在这里改变它。使代码更易于维护。
同意@AgataB .. 这是更好的方法.. :) +1 已经添加，我是第一个支持的人.. :)
不确定你们是 Js 的开发者还是明星.....@GuruprasadRao
@nsdlfefinedieicbe 你让我们脸红了.. ;) 感谢您的评论.. :) 我们确实是有实践经验的开发人员.. :)

标签： javascript jquery html canvas fabricjs

【解决方案1】：

换行

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

这是限制您的图像大小的原因。另外，我不知道为什么你有秤 - 但如果你保持它为.scale(0.9)，它不会填满整个盒子。相反，它只会填充其宽度和高度的 90%。

片段

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

【讨论】：

我不知道他们为什么在那个链接中使用 scale ，我只是复制了你的代码并替换了它，它工作正常。非常感谢。