Question

我找不到使用Resize过滤器（slideHack）的方法，有时候不会出现像素化图像。我使用fabric.js 1.7.2

rename_axis

我刚刚在画布中添加了图片

select mail.content.attachments from Mail mail

当我点击图片或手动调整图片大小时，边缘会变得平滑。
当我应用色调滤镜时，它会再次像素化

我找不到触发的功能来平滑边缘......

感谢您的帮助。

Answer 1

文档Introduction to Fabric.js, Part 2建议使用以下语法，这似乎可以解决问题：

fabric.Image.fromURL('pug.jpg', function(img) {

  // add filter
  img.filters.push(filter);

  // apply filters and re-render canvas when done
  img.applyFilters(canvas.renderAll.bind(canvas));

  // add image onto canvas
  canvas.add(img);
});

将结果与下面代码段中的原始方法进行比较。为了使其有效，我还添加了{ crossOrigin: 'Anonymous' }（请参阅AndreaBogazzi对this answer的评论）。

＆＃13;

var canvas = new fabric.Canvas('c');
var ctx = canvas.getContext("2d");
var url = 'http://i.imgur.com/a47Yxsb.png';
var imgWidth = 770;

function performScaling() {
  // Get scaling factor
  var scaling =  parseFloat(document.getElementById("txtScaling").value);

  canvas.clear();

  // With original method
  fabric.Image.fromURL(url, function(oImg) 
  {
    var rFilter = new fabric.Image.filters.Resize({
      resizeType: 'sliceHack'
    });
    oImg.resizeFilters.push(rFilter);
    oImg.applyFilters();

    oImg.set({
      left:   0, 
      top:    16, 
      scaleX: scaling, 
      scaleY: scaling
    });

    canvas.add(oImg);
    canvas.renderAll();
  });

  // As suggested in Fabric.js introduction
  fabric.Image.fromURL(url, function (oImg) {
      oImg.filters.push(new fabric.Image.filters.Resize({
          resizeType: 'sliceHack', scaleX: scaling , scaleY: scaling 
      }));
    oImg.set({
      left: imgWidth * 1.1 * scaling,
      top: 16
    });
    oImg.applyFilters(canvas.renderAll.bind(canvas));  
    canvas.add(oImg);
  },{ crossOrigin: 'Anonymous' });
  
  // Add labels
  canvas.add(new fabric.Text('Pixelated', {
    fontFamily: 'Arial',
    fontSize: 12,
    left: 0.48 * imgWidth * scaling,
    top: 0,
    fill: 'black',
    originX: 'center'
  }));  
  
  canvas.add(new fabric.Text('Not pixelated', {
    fontFamily: "Arial",
    fontSize: 12,
    left: 1.58 * imgWidth * scaling,
    top: 0,
    fill: 'black',
    originX: 'center'
  }));  
}

＆＃13;

#divScaling
{
  display: inline-block;
  vertical-align: middle;
  margin: 6px 32px 16px 0px;
  vertical-align: top;
}

#txtScaling
{
  width: 70px;
}

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.7.2/fabric.min.js"></script>
<div id="divScaling">
  <label for="txtScaling">Scaling factor: </label>
  <input id="txtScaling" type="text" value="0.2" />
  <button onclick="performScaling()">
  Scale
  </button>
</div>
<img src="http://i.imgur.com/a47Yxsb.png" style="width: 30px;height: 30px;"/>

<canvas id="c" width="600" height="400"></canvas>

＆＃13;

Answer 2

我认为像素化问题已在版本2中修复。Edge比版本1.72更平滑

通知v2中的重大更改：

另一个重大变化是.resizeFilters不再是调整大小筛选器数组。是在画布上缩放对象时可以使用的单个resizeFilter。

image.resizeFilter =新的fabric.Image.filters.ResizeFilter（{type：'hermite'}）;

var canvas = new fabric.Canvas('c');
var ctx = canvas.getContext("2d");
var url = 'http://i.imgur.com/a47Yxsb.png';
var imgWidth = 1024;

function performScaling() {
  // Get scaling factor
  var scaling =  parseFloat(document.getElementById("txtScaling").value);

  canvas.clear();

  // As suggested in Fabric.js introduction
  fabric.Image.fromURL(url, function (oImg) {
    oImg.set({
      left: imgWidth * 1.1 * scaling,
      top: 16
    });
    oImg.scale(scaling);
    oImg.resizeFilter = new fabric.Image.filters.Resize({
        resizeType: 'sliceHack'
    });
    oImg.applyResizeFilters();
    canvas.add(oImg);
    canvas.renderAll();

    // canvas.setBackgroundImage(
    //   oImg,
    //   () => {
    //     canvas.renderAll();
    //   },
    // );
    
  },{ crossOrigin: 'Anonymous' });
  
  // Add labels
  
  canvas.add(new fabric.Text('Not pixelated', {
    fontFamily: "Arial",
    fontSize: 12,
    left: 1.58 * imgWidth * scaling,
    top: 0,
    fill: 'black',
    originX: 'center'
  }));  
}

#divScaling
{
  display: inline-block;
  vertical-align: middle;
  margin: 6px 32px 16px 0px;
  vertical-align: top;
}

#txtScaling
{
  width: 70px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/2.4.4/fabric.min.js"></script>
<div id="divScaling">
  <label for="txtScaling">Scaling factor: </label>
  <input id="txtScaling" type="text" value="0.2" />
  <button onclick="performScaling()">
  Scale
  </button>
</div>
<img src="http://i.imgur.com/a47Yxsb.png" style="width: 30px;height: 30px;"/>

<canvas id="c" width="600" height="400"></canvas>

Fabric.js中的像素化图像与sliceHack调整大小过滤器

2 个答案: