How to enable retina scaling for cloned images using FabricJS?-JS Tutorial-php.cn

How to enable retina scaling for cloned images using FabricJS?

WBOY

Release： 2023-09-22 17:21:06

forward

1495 people have browsed it

如何使用 FabricJS 为克隆图像启用视网膜缩放？

In this tutorial we will learn how to enable retina scaling for cloned images Use FabricJS. We can create an Image object by creating an instance of fabric.Image. Since it is one of the basic elements of FabricJS, we can easily customize it as well Apply properties such as angle, opacity, etc. To enable cloned retina scaling For images, we use the enableRetinaScaling property. In this case, the cloned image is scaled Raise devicePixelRatio for better rendering on retina screens. there will be no Change the appearance of the image.

grammar

cloneAsImage( callback: function, { enableRetinaScaling : Boolean }: Object): fabric.Object

Copy after login

parameter

Callback (optional) - This parameter is a function that will be called with the cloned image instance as the first argument.
Options (optional) - This parameter is an optional object that provides additional customization to our cloned image. Using this parameter we can set the multiplier, crop the cloned image, remove the current object transform or can change many other properties, of which enableRetinaScaling is a property.

Option key

enableRetinaScaling - This property accepts a Boolean value that allows us Enable retina scaling for cloned images.

Use the enableRetinaScaling attribute and pass it a "false" value

Example

Let’s look at a code example to understand when Use the enableRetinaScaling property and pass it a "false" value. in this case, Retina scaling will not be enabled.

<!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 enableRetinaScaling property and passing it a ‘false’ value
   </h2>
   <p>You can see the cloned image with retina scaling disabled</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 a shadow object
      var shadow = new fabric.Shadow({
         color: "black",
         blur: 12,
      });
      // Initiate an Image object
      var image = new fabric.Image(imageElement, {
         top: 50,
         left: 110,
         skewX: 20,
         shadow: shadow,
      });
      
      // Using cloneAsImage method
      image.cloneAsImage(
         function(Img) {
            Img.set("top", 150);
            Img.set("left", 150);
            canvas.add(Img);
         }, {
            enableRetinaScaling: false,
         }
      );
   </script>
</body>
</html>

Copy after login

Use the enableRetinaScaling property and pass it a "true" value

Example

In this example, we used the enableRetinaScaling property and passed it "true" value. Therefore, retina scaling will be enabled for our cloned 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 enableRetinaScaling property and passing it a ‘true’ value
   </h2>
   <p>You can see cloned image with retina scaling enabled</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 a shadow object
      var shadow = new fabric.Shadow({
         color: "black",
         blur: 12,
      });
      
      // Initiate an Image object
      var image = new fabric.Image(imageElement, {
         top: 50,
         left: 110,
         skewX: 20,
         shadow: shadow,
      });
      
      // Using cloneAsImage method
      image.cloneAsImage(
         function(Img) {
            Img.set("top", 150);
            Img.set("left", 150);
            canvas.add(Img);
         }, {
            enableRetinaScaling: true,
         }
      );
   </script>
</body>
</html>

Copy after login

The above is the detailed content of How to enable retina scaling for cloned images using FabricJS?. For more information, please follow other related articles on the PHP Chinese website!