How to crop top offset in cloned image using FabricJS?-JS Tutorial-php.cn

How to crop top offset in cloned image using FabricJS?

WBOY

Release： 2023-09-10 22:33:04

forward

1439 people have browsed it

如何使用 FabricJS 裁剪克隆图像中的顶部偏移？

In this tutorial we will learn how to crop the top offset in 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 and we can also customize it easily through the application Angle, opacity and other properties. To crop the top offset in the cloned image, we Use the top attribute.

grammar

cloneAsImage( callback: function, { top: Number}: Object): fabric.Object

Copy after login

parameter

Callback (optional) - This parameter is a function that will use the cloned image instance as the first call 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 properties, where top is a property.

Option key

top - This property accepts a Number value, indicating that top must be offset be cropped. This attribute is optional.

Do not usetopattribute

Example

Let's look at a code example to understand how a cloned Image object appears when top Property is not used. In this case, the cloned image will not be cropped.

Without using the top property

You can see that no cropping has been applied to the clone image

Copy after login

Use topAttribute

Example

In this example, we used the top attribute and passed it the value 30, which is The top offset of the cropped cloned image. Therefore, the top part will be cropped.

Using the top property

You can see that cropping has been applied to the clone image

Copy after login

in conclusion

In this tutorial, we use two examples to demonstrate how to crop the top offset Clone image using FabricJS.

The above is the detailed content of How to crop top offset in cloned image using FabricJS?. For more information, please follow other related articles on the PHP Chinese website!