I want to crop an image with React and then save it to a database. I use this example: https://codesandbox.io/s/q8q1mnr01w?file=/src/index.js:1049-1061.
Now the "croppedImage" only shows the image itself. How do I get the cropped image into my database?
Related
I am working on a react project in which we generate new images by fitting uploaded image in a tv screen, or laptop screen or mobile screen. So what I want is a way in which I can place the uploaded image into this below image
In the black tv screen I want the uploaded image to fit and below there will be download option to download the uploaded image.
I searched for that and came across cloudinary react library. So I wrote this code to somehow fit an image inside this image but I can't seem to find any way to download that image.
If you have any idea of doing this please share with me.
Thank You in advance
You can overlay images on other images without having to use a particular Cloudinary SDK, as outlined here: https://cloudinary.com/documentation/image_transformations#adding_image_overlays
You can then place them more specifically using x and y coordinates in the URL as outlined here: https://cloudinary.com/documentation/image_transformations#placing_overlays
Once you have generated an image with the overlay positioned correctly (and with any other transformations you may wish to process), you can download the generated image as normal.
I am working in SSRS reports in that I need to display the logo for the report. I am having the image path in database like images/image1.png.i have used the external and database as the image source. But still no image is found in the logo.
Image path prefix with 'File:FilePath' For Example
'File:D:\logo.jpg'
I'am developing a blog website using react.js where users can post and comment ...
so we know that a user can comment with an image ,and let's say he want to upload a local image that stored in his machine,i want to display that image as a comment and save it into postgres database which i'am using for that.
My question is what are the steps that i should follow to achieve my purpose,thanks in advance.
If you have to do in simple steps, you can save the image to base64, its just string representation of an image. So it can be saved in DB directly and when you have to show it just decode the string and display it accordingly.
References :-
https://github.com/dankogai/js-base64#readme
https://scotch.io/tutorials/how-to-encode-and-decode-strings-with-base64-in-javascript
Alternatively, what you can do when user selects an image, then upload that image to your server and get the path to that(multipart file upload) and from path you can show it where you want to show.
References :-
how to send a multipart/form-data from React.js with an image?
I hope it helps, Thanks :)
In report designer, I have a logo.jpg located in the same directory of the reports. If I set the image source as external and path as logo.jpg. The image will show in designer preview. However, after I deploy the reports and the image to SSRS server, the image will not show. What happens is the image will be saved in SSRS as resources, but once I click on it it will give me some messy code.
If I open the report in the application, the image will also not display.
However, if I download it I can view it from my hard drive.
My current fix is to use absolute path in report designer or point to a image in the web, but that is not ideal.
I think that would be a access permission problem but I could not figure out why.
I used https://convert.town/image-dpi to convert my image to 96 dpi. SSRS then renders the image correctly in the pdf export.
I am using ngImgCrop directive to crop images in my application. As a first step, the actual image gets uploaded to the server as soon as the user selects it. The second step is to crop it. I need to know the coordinates of the cropped image to send it to server so that it crops the image based on the coordinates.
Is it possible to get the coordinates of the cropped image? Please let me know
You can do the cropping in the browser before it gets uploaded, I have done it using Danial Farid's angular file upload
https://github.com/danialfarid/ng-file-upload
and ngCroppie,
https://allenroyston.herokuapp.com/access/acr-croppie/
It's a wrapper for Foliotek's Croppie
http://foliotek.github.io/Croppie/