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/
Related
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?
I'm trying to extract cropped portion in pdf in PDFTron. The crop feature creates a new page instead I want to get the cropped image and make send it in a API call in ReactJs.
Can anyone help me in extracting the cropped area.
EDIT
I'm trying to get cropped portion of the page, in PDFTron by default it crops the page and creates a new page with the cropped part. I want to get the cropped part of the page in form of an image without creating a new page and make an API call.
OS: Windows
Framework: ReactJS
We do not have that functionality supported out of the box, but what you could do is build custom button to do something similar. We have an example you might be interested here - https://groups.google.com/g/pdfnet-webviewer/c/kpW94WwAfaA/m/-UAavgReDAAJ. Note that this example is a bit old, so there might have been some API changes since.
Thanks.
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 connecting Active Directory to a platform my company uses. In order to ensure that user's have a profile picture, I will add the URL of the photo to an attribute and connect it that way. However, the URL for the image must take me directly to the image. So far, I have been able to store images on different options but for each one, when I select the URL, it takes me to the webpage that disples other items than just the image (e.g. - https://ibb.co/J2cFfsx ). How can I store photos so that the URL takes me directly to JUST the image ONLY?
right click on the image and click view image. once you have done this you should get something that looks like below. In the URL there should be a new link, if you use that one it should always take you to the image aslong as it exits.
Equally you can right click on the image and select "copy image location" and that will give you the new link. I personally perfer the other method as it gives a proper preview of the image at its full size.
new image view
To link your image to the document go and search for image on google. right click on image -> Create QR code for this image after showing the QR code. Beneath QR code there is a link copy that and paste it in your document where you want. Now just to be sure click on the link and it will show the image only. Try it!!
I'm trying to implement client side crop with https://github.com/alexk111/ngImgCrop into https://github.com/blueimp/jQuery-File-Upload using Angular, such as this demo: https://blueimp.github.io/jQuery-File-Upload/angularjs.html
What i'm trying to accomplish is to combine similar functionality of these two:
https://blueimp.github.io/JavaScript-Load-Image/
https://blueimp.github.io/jQuery-File-Upload/angularjs.html
I want to allow user to crop image before uploading it, but i'm having trouble to find any information of the image. fileis empty inside the ng-repeat, because the image is not uploaded so where do i find the data of the image? Only thing i've managed to find is the <canvas> which is being appended in js/jquery.fileupload-angular.js:385 $element.append(preview);.
I should pass the data of the original image for the ng-crop module and it should then pass a thumbnail back to the blueimp file uploader so that user could see a thumbnail of the cropped file he/she is about to upload. I want to add on the ng-repeat a button, such as <button type="button" class="btn btn-default crop" data-ng-click="file.$crop()" data-ng-hide="!file.$crop">Crop</button> which should open up a modal where is the crop-module.
I'm not asking you to provide me a 100% full source code which i could just copy paste and everything should work fine, i'm hoping to get some advices on where should i start and/or how this could be done.
If you happen to know any better module for cropping the image, please feel free to let me know, its not necessary for me to use the ngImgCrop, as long as it works with angular and blueimp file upload.