在本文中，我们将展示如何使用FabricJS为图像添加平滑效果。平滑化可以给图像带来平滑的效果。可以通过创建 fabric.Image 的实例来创建一个Image对象。由于它是FabricJS的基本元素之一，也可以通过应用角度、不透明度等属性轻松地定制它。为了增加图像的平滑性，使用imageSmoothing属性。
语法
new fabric.Image( element: HTMLImageElement | HTMLCanvasElement | HTMLVideoElement | String, { imageSmoothing: Boolean }: Object, callback: function)
参数
element- 这个参数接受HTMLImageElement、HTMLCanvasElement、HTMLVideoElement或表示图像元素的String。字符串应该是一个URL，并将作为一个图像加载。options (optional)- 这个参数是一个对象，为对象提供额外的定制。使用这个参数可以改变与imageSmoothing是一个属性的图像对象有关的原点、笔触宽度和许多其他属性。callback(可选) - 这个参数是一个函数，在最终的过滤器被应用后，它将被调用。
图像对象的默认外观
下面来看一个代码例子，当imageSmoothing属性未被使用时，图像对象如何出现。在这种情况下，默认值将被使用，即为true，因此画布将使用图像平滑。
<html>
<head>
<!-- Adding the Fabric JS Library-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/510/fabric.min.js"></script>
</head>
<body>
<h2>Default appearance of Image object</h2>
<p>You can see that image smoothing has been applied by default</p>
<canvas id="canvas"></canvas>
<img src="https://www.yiibai.com/images/logo.png" id="img1" style="display: none" />
<script>
// Initiate a canvas instance
var canvas = new fabric.Canvas("canvas");
canvas.setWidth(document.body.scrollWidth);
canvas.setHeight(250);
// Initiating the image element
var imageElement = document.getElementById("img1");
// Initiate an Image object
var image = new fabric.Image(imageElement, {
top: 50,
left: 110,
});
// Add it to the canvas
canvas.add(image);
</script>
</body>
</html>
使用imageSmoothing属性并传递给它一个假值
在这个例子中，使用了imageSmoothing属性，并给它一个false值。因此，画布将不再使用图像平滑来绘制图像。
<!DOCTYPE html>
<html>
<head>
<!-- Adding the Fabric JS Library-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/510/fabric.min.js"></script>
</head>
<body>
<h2>Using the imageSmoothing property and passing it a false value</h2>
<p>You can see that image smoothing is no longer functioning</p>
<canvas id="canvas"></canvas>
<img src="https://www.yiibai.com/images/logo.png" id="img1" style="display: none" />
<script>
// Initiate a canvas instance
var canvas = new fabric.Canvas("canvas");
canvas.setWidth(document.body.scrollWidth);
canvas.setHeight(250);
// Initiating the image element
var imageElement = document.getElementById("img1");
// Initiate an Image object
var image = new fabric.Image(imageElement, {
top: 50,
left: 110,
imageSmoothing: false,
});
// Add it to the canvas
canvas.add(image);
</script>
</body>
</html>
