Fabric.js canvas 图像抗锯齿

Question

有没有办法使用 fabric.js 对添加到 canvas 的图像进行抗锯齿处理我无法使用 scaleToHeight 函数执行此操作。我在面料库中找不到合适的选项。

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>

如您所见，这张图片看起来有锯齿。

Answer 1

原始图像是所需尺寸的 10 倍。

向下缩放 10 倍导致 "jaggies"。是的，向下缩放会导致锯齿，就像向上缩放会导致锯齿一样。

您可以通过逐步将原始图像向下缩放至所需大小来减少锯齿。

这是示例代码和演示：

原图缩小4倍减半然后scaleToHeight应用得到最终尺寸fabric.Image.

var canvas = new fabric.Canvas('canvas');

var downscaledImg;
var img=new Image();
img.onload=start;
img.src="https://grafikoan.files.wordpress.com/2012/10/spheres-grafic-design-grafikoan-hd-300-p-2.png";
function start(){
    // create a canvas that is 4x smaller than the original img
    downscaledImg=downscale(img,4);
    // create a fabric.Image from the downscaled image
    var fImg=new fabric.Image(downscaledImg);
    fImg.scaleToHeight(canvas.getHeight());
    canvas.add(fImg);
    canvas.renderAll();
}

function downscale(img,halfCount){
    var cc;
    var c=document.createElement('canvas');
    c.width=img.width/2;
    c.height=img.height/2;
    c.getContext('2d').drawImage(img,0,0,img.width/2,img.height/2);
    halfCount--;
    for(var i=0;i<halfCount;i++){
        cc=document.createElement('canvas');
        cc.width=c.width/2;
        cc.height=c.height/2;
        cc.getContext('2d').drawImage(c,0,0,c.width/2,c.height/2);
        halfCount--;
        c=cc;
    }
    return(c);
}

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

<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>    </body>

Answer 2

fabricjs 有自己的调整大小过滤以避免锯齿。调整大小过滤器，类型 "sliceHack" 是 fastest/good 结果之一。如果您不需要在调整大小时进行动态过滤，您还可以使用 lanzcos 过滤、双线性、快速隐士。

更新：自 2017 年 7 月以来，fabric 2.0 有一种质量好且速度非常快的 lanzcos webgl 实现。默认情况下 webgl 是打开的，webgl 中没有替代算法，只有 lanzcos。

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>

请检查此 link 以获取没有 CoR 问题的工作示例。

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

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

这里有更多例子：https://github.com/kangax/fabric.js/issues/1741

Fabric.js canvas 图像抗锯齿

Fabric.js canvas image antialiasing

javascript

html5-canvas

fabricjs