Fabric.js画布图像抗锯齿 [英] Fabric.js canvas image antialiasing

问题描述

是否有办法使用fabric.js
添加到画布的抗锯齿图像我无法使用scaleToHeight函数执行此操作。我在结构库中找不到任何合适的选项。

Is there a way to antialiase image that added to canvas using fabric.js I'm having trouble to do this with scaleToHeight function. I couldn't find any suitable option in fabric library.

var canvas = new fabric.Canvas('canvas');
var url = 'https://grafikoan.files.wordpress.com/2012/10/spheres-grafic-design-grafikoan-hd-300-p-2.png';
fabric.Image.fromURL(url, function (oImg) {
	oImg.scaleToHeight(canvas.getHeight());
  canvas.add(oImg);
  canvas.renderAll();
});

<script src="http://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.5.0/fabric.min.js"></script>
<canvas id="canvas" width=400 height=300></canvas>

正如你所看到的，这张图片看起来很锯齿。

As you can see this image looks jagged.

推荐答案

fabricjs有自己的调整大小过滤以避免锯齿。
调整大小过滤器，类型为sliceHack是最快/最好的结果。
如果您不需要动态过滤调整大小，您还可以使用lanzcos过滤，双线性，快速隐士。

fabricjs has its own resize filtering to avoid jaggies. Resize filter, with type "sliceHack" is the fastest/good result one. If you do not need dynamic filtering on resize you can also use lanzcos filtering, bilinear, fast hermit.

var canvas = new fabric.Canvas('canvas');
var url = 'https://grafikoan.files.wordpress.com/2012/10/spheres-grafic-design-grafikoan-hd-300-p-2.png';
fabric.Image.fromURL(url, function (oImg) {
    var scaling = canvas.getHeight() / oImg.height;
    oImg.filters.push(new fabric.Image.filters.Resize({
        resizeType: 'sliceHack', scaleX: scaling , scaleY: scaling 
    }));
  canvas.add(oImg);
  oImg.applyFilters(canvas.renderAll.bind(canvas));  
},{ crossOrigin: 'Anonymous' });

body{ background-color: ivory; }
#canvas{border:1px solid red; margin:0 auto; }

<script src="http://www.deltalink.it/andreab/fabric/fabric.js"></script>
<canvas id="canvas" width=400 height=300></canvas>

请查看此链接以获取没有CoR问题的工作示例。

Please check this link for a working example with no CoR issue.

http://www.deltalink.it/andreab/fabric/resize。 html

比较normale图像和sliceHack图像，一旦调整大小，过滤器就会启动。

Compare normale image and sliceHack image, the filter will kick in once you resize.

更多示例： https://github.com/kangax/fabric.js/issues/ 1741

这篇关于Fabric.js画布图像抗锯齿的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！