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:
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.
Top comments (0)