New Gravity Support in Image Previews | Appwrite

With new version of Appwrite, we have added gravity support while cropping image previews. So what is gravity? Cropping an image is essentially a process of taking smaller part of an image and the gravity species which portion of image to take. So, the gravity value of top-left, tells to take the top left portion of image while cropping. One thing to remember about cropping and gravity in Appwrite is that, Appwrite handles crop with gravity as a thumbnail cropping, that is first Appwrite will resize the image to the minimum possible size keeping the aspect ratio intact and then consider the gravity while cropping to the exact size specified. Also, the default gravity is center so your existing code will not break.

While using rest params, you can simply pass gravity param and value which can be one of top, top-left, top-right, left, right, bottom, bottom-left and bottom-right

🖨️ Example Output

Let's look at some example image output with crop and gravity.

First, here is the original image, which is 478x500px in size.

50x200px top-left	50x200px top-right	150x200px center

If you are using our SDKs, you can pass the gravity parameter in getFilePreview method

🎯 Example Flutter

FutureBuilder<Uint8List>(
    future: storage.getFilePreview(fileId: 'fileId', width: 300, height: 500, gravity: 'top'),
    builder: (context, snapshot) {
    if (snapshot.hasData) {
        return Image.memory(snapshot.data!);
    }
    if (snapshot.hasError) {
        if (snapshot.error is AppwriteException) {
            print((snapshot.error as AppwriteException).message);
        }
        print(snapshot.error);
    }
        return CircularProgressIndicator();
    },
),

🕸️ Example Web

<script>
    let sdk = new Appwrite();
    sdk
        .setEndpoint('https://[HOSTNAME_OR_IP]/v1') // Your API Endpoint
        .setProject('5df5acd0d48c2'); // Your project ID

    let result = sdk.storage.getFilePreview('[FILE_ID]', 300, 500, 'top');
    document.getElementById('preview').src = result;
</script>
<img src="#" id="preview">

🤖 Example Android

// ... Imports 
class X : Fragment() {
    private lateinit var binding: FragmentXBinding

    override fun onCreateView(
        inflater: LayoutInflater ,
        container: ViewGroup? ,
        savedInstanceState: Bundle?
    ): View {
        binding = DataBindingUtil.inflate(
            inflater,
            R.layout.fragment_x,
            container,
            false
        )
        binding.lifecycleOwner = viewLifecycleOwner

        val storage = Storage(Client.client)
        GlobalScope.launch(Dispatchers.Main) {
            val result = storage.getFilePreview(
                fileId = "[FILE_ID]",
                gravity = "top-left",
                width = 100,
                height = 50
            )
            val image = BitmapFactory.decodeStream(result.body!!.byteStream())
            binding.image.setImageBitmap(image)
        }
        return binding.root
    }
}

Learn More

Appwrite has many services and tools to allow you to build applications in a much more productive and secure way. You can use the following resources to learn more about Appwrite and how to leverage it in building your next web and mobile project:

📜 Appwrite Docs

💬 Discord Community

Don't forget to join the Appwrite Discord community, where you can learn more about Appwrite, get the latest updates, and get light-speed help with any question you might have.