I am trying to build a web app that allows users to upload images then select parameters for resizing and cropping. I've decided I'm going to handle the cropping with react-cropper but I can't figure out how to handle the resizing itself. Are there any packages you all would suggest? Or otherwise, can I have some advice on how to implement this in react in a way that would produce good looking images well-scaled w/ consistent aspect ratio?
I'm new to reactjs and development in general so any detailed advice on how to go about building this system would help a ton.
Thanks
react
The question will be: Will you handle the image resizing / optimising on the server or within your browser?
I recently did one project that required to manipulate DOMs in the browser and export as a new image. I was using a library dom-to-image
which can convert your React components into jpeg, png or svg. So the solution is that you handle the resizing with any React or javascript libraries like react-resizable in the browser and export the image with dom-to-image.
I hope it helps.
Related
I am working on an app that includes the user taking a picture, then editing it. However, I have noticed that when the buttons used for editing are displayed, they are often not very visible due to the image background. The buttons contain images that have their colour set by tintColor. I would like the buttons to be visible no matter what the colours of the image are. I have found a CSS filter that achieves this, but there is no React Native implementation of it. I have also found a library that can do this (react-native-color-matrix-image-filters), but I cannot use it because I am using a managed Expo project with Expo Go.
Any help would be much appreciated. :)
Starting from Expo SDK 42, you can install a native library with Expo, you just need to compile a custom Expo Go client app with a native module (react-native-color-matrix-image-filters) pre-compiled and embedded.
You still have amazing Expo DX use native module support.
Check how to compile Expo Go Custom App here - https://www.youtube.com/watch?v=id0Im72UN6w&t=25s
I have been using the recharts library for the dashboards in a NextJs app and a new requirement came through to download tables and charts through a PDF.
On the github for the react-pdf there was an issued raised that has now been closed due to the newly release of SVG support in the package where the author states the bindings should be done separately and people have achieved this.
Solved GitHub issue: https://github.com/diegomura/react-pdf/issues/669
SVG example: https://react-pdf.org/repl?example=svg
So far I have go the PDF rendering simple content such as text. Note: to get the react-pdf to work in this sandbox you might need to open it in a new window.
https://codesandbox.io/s/simple-line-chart-forked-vifo9?file=/src/App.tsx
I'm creating a gallery of images in ReactJs. There are a lot of examples online, but i didn't find anything that is perfectly responsive on desktop browsers and also completely mobile friendly.
In particular, when an image is opened on the mobile browser, i need to be able to zoom the photo with a double tap, and close the photo when i drag it to the bottom
I already tried all the principal solution that i found online.
For example, i tried all of these https://reactjsexample.com/tag/lightbox/
and much much more.
I also tried different approaches like CSS rules, Viewport rules, create a simple zoomable html div, etc... But nothing worked.
Basically, what i what to achieve is exactly something like this: https://www.lucapetruzzi.com/gallery/1
Created thanks to this library: https://photoswipe.com/ that unfortunately i can't use in React.
(I also tried the react-photoswipe and react-photoswipe-2 libraries but it seems not maintained and not working with new versions of React)
Thank you for any help
So for previous comments, I wrote a snippet for you, check here
Here are the mainly steps:
use npm install photoswipe so DON'T need to include builded js but NEED to include css in index.html (or you can import in App.css)
write the markup in js component
init it by click button or in useEffect
I have a question related to React Native.
I have existing application that should be themed and theming should be part of the configurable settings. There should be 3 aspects of such theming: changing colors/theme, changing logo and add custom fonts
I see this is a way that there will be settings view where:
there will be possibility to upload image, image will be stored in filesystem in ios and android and then used as a brand logo
there will be multiple settings regarding some primary, secondary, buttons colors as hash values, or maybe some color picker component
The most complicated stuff is having custom fonts that can be configured by user in setting view of application. Anybody have experience with doing such a thing?
Any thought/suggestions in above points will be helpful. Like links to native libraries for both platform or any tips from more experiences React Native developers
The best ways I see to achieve what you want are :
Use https://github.com/itinance/react-native-fs to access file system so you can easily store and access the logo that the user want. If the image has some size restrictions you could as well store your image Base64 string in AsyncStorage but this is not recommended.
You can have a kind of theming system by using a global style file that your screens use, the values requested (for example "dark", "light" etc...) can be store in AsyncStorage.
Do you want the user to be able to use his own personal font ? I don't think this is possible. If you want to have multiple fonts and the user can choose which font will be used in a list for example you can follow this tutorial to install custom fonts : https://medium.com/#kswanie21/custom-fonts-in-react-native-tutorial-for-ios-android-76ceeaa0eb78. Then all you want to do is use your theming system to select the fontFamily that your text elements will be using !
Let me know if I'm not clear enough or you need advices, I recently did what you try to achieve :)
i need a hint... started in React native and tried Expo. Goal is to create an OSM map app for hiking. So far i run into 2 problems:
no background works in Expo location
no OSM map plugin compatible with Expo
First might be resolved in the future, the Expo guys work on that.
Second... using something like the mapbox for JS will not help, as i did not see any solution for offline caching.
Now i am asking myself if i should continue without Expo using pure React native (mapbox SDK will offer caching), or keep Expo and create a map-box on my own (loading tiles based on lat/lon and displaying the current position on a tile is not that hard...)
Any experiences for a similar problem?
As this is kind of a learning project i am not interested in available apps, i am already using some of them ;)
Thanks and regards, Jo