Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How to enable retina scaling for cloned image using FabricJS?
In this tutorial, we are going to learn how to enable retina scaling for a cloned image using 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 also easily customize it by applying properties like angle, opacity etc. In order to enable retina scaling for a cloned image, we use the enableRetinaScaling property. In this case, the clone image is scaled up by the devicePixelRatio for better rendering on retina screens. There will be no change on the appearance of the image.
Syntax
cloneAsImage( callback: function, { enableRetinaScaling : Boolean }: Object): fabric.Object
Parameters
callback(optional) ? This parameter is a function which is invoked with a cloned image instance as the first argument.options(optional) ? This parameter is an optional Object which provides additional customizations to our clone image. Using this parameter we can set a multiplier, crop the clone image, remove the current object transform or change other properties, of whichenableRetinaScalingis one.
Options Keys
enableRetinaScaling? This property accepts a Boolean value which allows us to enable retina scaling for the clone image.
Using enableRetinaScaling with 'false' Value
Let's see a code example of how the cloned Image object appears when the enableRetinaScaling property is used and a 'false' value is passed to it. 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>
Using enableRetinaScaling with 'true' Value
In this example, we have used the enableRetinaScaling property and passed it a 'true' value. Thus, retina scaling will be enabled for our clone 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>
Key Points
- The
enableRetinaScalingproperty improves image quality on high-DPI displays - When set to
true, the cloned image is scaled by the device's pixel ratio - The visual appearance remains the same, but rendering quality improves on retina screens
- This property is particularly useful for applications targeting devices with high-resolution displays
Conclusion
The enableRetinaScaling property in FabricJS ensures optimal image quality on high-DPI displays by scaling cloned images according to the device's pixel ratio. Use true for better quality on retina screens.
739 Views
