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.
Related
Hey I have a weird issue in react images. Some images are not showing and some are showing.
This is my simple implementation:
<img src={item?.media?.url} />
and when I check the console and then copy the src, the image opens normally. So the url isn't the problem
Looks like you're trying to hotlink an Instagram image.
You can try downloading the image and then displaying it, or you can just embed the Instagram post
It seems your URL is broken, cause the way your using it is correct, make sure by clicking on the link, a new tab should open showing the actual image
And make sure the extension of the image is being added, cause on the image that you shared, there is no valid image extension in the URL (.png, .jpg, etc..)
I'm using this code to download the image of an uri and then pass it to the function that opens Instagram like a UImage.The problem comes when I try to share another image, the application gets me the last image that I use, and not the one that I'm downloading or selecting, and I trying to delete this local file, but I can't remove it.
https://learn.microsoft.com/en-us/answers/questions/577839/sharing-image-on-instagram-ios-something-get-the-l.html
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 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/
I was working on a very simple and fast image uploader for CKEditor. It works all like a charm, the only problem now is the actual upload. I thought it would all be easy, but now I am stuck.
I have the CK file-field and figured I could just run an ajax request to my php uploading script, the problem is now: how do i get the file data to upload it. The Ajax does not have the post values, so I am lost.
Please lead me into the right direction.
Thanks very much.
When you use Ajax to post the form, your file upload function should be able to get the values from the form as usual.
For example, see this article: http://www.finalwebsites.com/forums/topic/php-ajax-upload-example
Well, i now used an iFrame with the form in it. Using uplodify in the iframe it put the path to the file in a hidden input which I can extract from the frame and use as the src form my image in CKEditor.