An Interest In:
Web News this Week
- April 26, 2024
- April 25, 2024
- April 24, 2024
- April 23, 2024
- April 22, 2024
- April 21, 2024
- April 20, 2024
Some of Our Sources
- Simplebits
- TutsPlus - Code
- The Logo Smith
- Smashing Apps
- Vandelay Design
- Creative Curio
- Reencoded
- CSS Globe
- Hashedout
- TechPowerUp
Help Webnuz
Referal links:
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:
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.
Original Link: https://dev.to/appwrite/new-gravity-support-in-image-previews-appwrite-442j
Dev To
An online community for sharing and discovering great ideas, having debates, and making friendsMore About this Source Visit Dev To