Home > Article > Web Front-end > How to add image smoothing to images using FabricJS?

How to add image smoothing to images using FabricJS?

WBOYforward: 2023-08-24 13:53:111237browse

如何使用 FabricJS 为图像添加图像平滑？

In this tutorial we will show how to add image smoothing to an image Use FabricJS. Smoothing gives an image a smoothing effect. We can create an image Create an object by creating an instance of fabric.Image. Because it is one of the basic elements With FabricJS, we can also easily customize it by applying properties like angle, opacity, etc. To add image smoothing we use the imageSmoothing property.

grammar

new fabric.Image( element: HTMLImageElement | HTMLCanvasElement | HTMLVideoElement | String, { imageSmoothing: Boolean }: Object, callback: function)

parameter

element - This parameter accepts a HTMLImageElement, HTMLCanvasElement, HTMLVideoElement, or String element that represents an image. The string should be a URL and will be loaded as an image.
Options (optional) - This parameter is an object that provides additional customization to our object. Using this parameter, you can change the origin, stroke width, and many other properties associated with the image object for which imageSmoothing is the property.
Callback (optional) - This parameter is the function that is called after the final filter is applied.

Option key

imageSmoothing - This property accepts a Boolean value that represents Whether the canvas uses image smoothing when drawing images. it is The default value is true.

Default appearance of image objects

Example

Let's look at a code example to understand how an Image object appears when imageSmoothing Property is not used. In this case, the default value, true, will be used, so The canvas will use image smoothing.

<!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>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.tutorialspoint.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>

Use the imageSmoothing property and pass it a false value

Example

In this example, we used the imageSmoothing property and assigned it false value. Therefore, the canvas will no longer use image smoothing to draw the image.

<!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.tutorialspoint.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>

in conclusion

In this tutorial, we use two examples to demonstrate how to Images using FabricJS

The above is the detailed content of How to add image smoothing to images using FabricJS?. For more information, please follow other related articles on the PHP Chinese website!

String Boolean 字符串对象 fabric

Statement：

This article is reproduced at:tutorialspoint.com. If there is any infringement, please contact admin@php.cn delete

Previous article：How to convert a Map's keys to an array in JavaScript?Next article：How to convert a Map's keys to an array in JavaScript?

See more

How to add image smoothing to images using FabricJS?

grammar

parameter

Option key

Default appearance of image objects

Example

Use the imageSmoothing property and pass it a false value

Example

in conclusion

Related articles