代码之家 › 专栏 › 技术社区 › anonymoose

如何将图像添加到画布,并按大小缩放?

fabricjs canvas javascript

anonymoose · 技术社区 · 6 年前

我可以将本地图像添加到画布。但我的问题是,我只能按以下方式缩放图像 0.5 但这并没有多大帮助,因为图像总是不同的。我怎么能让图像缩放到400px宽,但剩下的 按比例调整大小 因此,无论所选图像的大小,都是合适的,而且这不是一个猜测游戏(目前我有一个指向图像大小调整器的链接,我正在尝试消除这种需要)?

我使用的是fabricjs 1.7.21。

var canvas = new fabric.Canvas("c");
canvas.setHeight(616);
canvas.setWidth(446);

// New Photo to Canvas
document.getElementById('imgLoader').onchange = function handleImage(e) {
  var reader = new FileReader();
  reader.onload = function(event) {
    var imgObj = new Image();
    imgObj.src = event.target.result;
    imgObj.onload = function() {
      var image = new fabric.Image(imgObj);
      image.set({
        left: 10,
        top: 10,
      }).scale(0.5);
      canvas.add(image);
    }
  }
  reader.readAsDataURL(e.target.files[0]);
}

canvas {
  border: 1px solid #dddddd;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.7.21/fabric.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<label class="btn btn-default" id="imgLoader">
            <span class="oi oi-image"></span> Add Image<input type="file" hidden>
        </label>
<canvas id="c"></canvas>

2 回复 | 直到 6 年前

Nir Ben-Yair 6 年前

尝试以下操作:

var canvas = new fabric.Canvas("c");
canvas.setHeight(616);
canvas.setWidth(446);

// New Photo to Canvas
document.getElementById('imgLoader').onchange = function handleImage(e) {
  var reader = new FileReader();
  reader.onload = function(event) {
    var imgObj = new Image();
    imgObj.src = event.target.result;
    imgObj.onload = function() {
      var image = new fabric.Image(imgObj);
      image.width = 400;
      image.height = 400;
      image.set({
        left: 10,
        top: 10,
   
      });
      canvas.add(image);
    }
  }
  reader.readAsDataURL(e.target.files[0]);
}

anonymoose 6 年前

scaleToWidth / scaleToHeight 这就是我要找的。您可以找到文档 here .

这是@Ben评论的道具。我想结束这个问题。

推荐文章

chizz · fabricJs自定义对象不从JSON呈现

6 年前

anonymoose · 对象属性不会通过JSON保存或加载持久化

6 年前

Jaan · Fabricjs对象在完成时移动火

6 年前

user9513304 · 如何触发或接收组中对象的事件?

6 年前

Michael Tsipes · fabric的上下文菜单。js不在Safari中工作

6 年前

Peter I · FabricJS缩放图像以适应宽度/大小

6 年前

anonymoose · 更新JSON。字符串化(画布);最新画布更改

6 年前

MyNameIsMe · 织物节点上的js。js应用筛选器失败

6 年前

anonymoose · 如何对任何结构使用centeredScaling。js对象

6 年前

anonymoose · 如何将图像添加到画布,并按大小缩放?

6 年前