有没有办法使用fabric.js添加到画布的抗锯齿图像我无法使用scaleToHeight函数执行此操作。我在Fabric库中找不到任何合适的选项。
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>
如你所见,这张图片看起来很锯齿。
fabricjs有自己的调整大小过滤,以避免锯齿。调整大小过滤器,类型为“sliceHack”是最快/最好的结果。如果你不需要动态过滤调整大小,你也可以使用lanzcos过滤,双线性,快速隐士。
更新:从2017年7月开始,使用fabric 2.0,有一种lanzcos webgl实现,质量好,速度快。默认情况下,webgl已启用,并且webgl中没有替代alghoritm,仅限于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>
请查看此链接以获取没有CoR问题的工作示例。
http://www.deltalink.it/andreab/fabric/resize.html
比较normale图像和sliceHack图像,一旦你调整大小,过滤器就会启动。
原始图像大小为所需大小的10倍。
向下缩小10倍会导致你的“锯齿”。是的,向下缩放会导致锯齿状,就像向上扩展一样会导致锯齿状。
您可以通过逐步将原始图像向下缩放到所需大小来减少锯齿。
这是示例代码和演示:
将原始图像缩小4倍,然后应用scaleToHeight
以获得最终尺寸的图像。图像。
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>