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

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

fabricjs canvas javascript

anonymoose · 技术社区 · 7 年前

我可以将本地图像添加到画布。但我的问题是,我只能按以下方式缩放图像 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 回复 | 直到 7 年前

Nir Ben-Yair 7 年前

尝试以下操作:

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 7 年前

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

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

推荐文章

Jay White · useRef。current存在,但根据作用域的不同为空

2 年前

Laurie Thom · 使用HTML画布和JS的拖尾图像

2 年前

Hamza Zafeer Bert · 2画布不能以单一HTML格式工作

2 年前

Chukwuma Kingsley · clearRect让我的方块消失了

2 年前

Shaheryar Ahmed · 如何在放大或缩小时更改tkinter画布文本项的大小?

2 年前

bemol · D3正确缩放/重缩放

2 年前

Ghoyos · 这个“如果声明”不应该引起反弹吗?

6 年前

Ghoyos · 一旦实例化/绘制到画布,移除/删除函数对象的最佳方式是什么?

6 年前

user8923822 · 如何从画布中清除Path2D

6 年前

Martyna · 画布上的李萨如曲线

6 年前