Fabric.js画布图像抗锯齿

Question

有没有办法使用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> 

如你所见，这张图片看起来很锯齿。

Answer 1

原始图像大小为所需大小的10倍。

向下缩小10倍会导致你的“锯齿”。 是的，向下缩放会导致锯齿状，就像向上扩展一样会导致锯齿状。

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

这是示例代码和演示：

将原始图像缩小4倍，然后应用scaleToHeight以获得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> 

Answer 2

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图像，一旦你调整大小，过滤器就会启动。

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