Problem
I have been trying for awhile without success to crop an base64 image taken from the camera using the camera preview plugin to a 4:3 resolution without any cropping input being done by the user.
Most plugins I have tried so far force a UI but for my purpose it needs to crop to 4:3 to then be sent to a server all as the same resolution.
What i've tried
I have tried tweaking the ionic native plugin without success.
Also i've tried numerous different Cordova plugins that have been suggested from other forum posts such as:
Cropper.js
Croppr.js
Cordova Plugin Crop - without the ionic native side
iCrop
All of those as far as I know force a UI as well as don't allow you to specify an aspect ratio.
In our app we needed cropped pictures as well. However it turned out (especially on Android devices) that the way you can crop after taking a picture depends on brand, model and even the camera app.
In Ionic 3 the camera plugin has an option allowEdit. There are some side effects when you set this to true. For example some users cropped there pictures in a very weird aspect ration like: 1:15, so a very small width, and a very large height. Keep this in mind when you allow your users to edit their pictures.
To get consistent crops we have implemented the cropping server side. In order to speed things up we only resize the picture on the client and upload the resized picture to the server.
Related
I'm putting together a site for work using Wix. Currently, the page I am working on has an image on it that is meant to be used by the user to find out what size of disposable gloves they should purchase.
The issue is this image is resized on computers with a smaller resolution. I need this picture to remain at its exact size no matter what the size of the desktop monitor.
Is there a way of accomplishing this through Javascript?
Layout should be visible by link. Thanks!
You do not have access to CSS/HTML on wix (for this context) so the only way you can control image dimensions is using the fitMode property of the image.
I am working on a project in which I render over 4,000 photos to a web page. The photo sources are online links, so I cannot resize them myself locally as I don't have them saved to my computer.
Each photo is about 800px x 800px, but the image objects I'm creating only need to be 200px x 200px. The loading time for the page is pretty slow, especially on mobile, and I'm hoping resizing the photo after sourcing them but before rendering them will speed up the load time.
Is it possible to:
(1) source an image from a link then
(2) resize / compress the photo before
(3) rendering the photo in an image object on the webpage?
All without needing to touch the original photos as they are on the web and without needing to download directly to my computer?
I think the load time will actually increase because first you have to fetch the full image from the remote source and then you also have to crop it! You definitely need to load already compressed images!
We have an Ionic app that accesses $cordovaCamera like so:
$cordovaCamera.getPicture({ allowEdit: true });
There are more options passed in, etc., but the above is just showing that we're passing in the allowEdit flag. If anyone is unfamiliar, here's what the docs say:
allowEdit: Allow simple editing of image before selection. (Boolean)
This works perfectly. After I select a picture from the gallery or take a picture, it then goes to its native "edit" view, where the user can crop the image.
Here's the flow:
Take Photo > Edit (crop) > Upload to the interwebs
Select Photo > Edit (crop) > Upload to the interwebs
On Android, you can resize the crop field and move the crop field around.
On iOS, you can't move the crop field (unless you zoom in first), and you can't resize the crop field at all.
Is this just an iOS quirk we have to live with, or is there some way to get around this? This is happening in iOS 8.3.
Screenshots coming soon
Edit
Here's the video demonstrating the problem.
At 0:16 you'll see that it's impossible to move the crop box. (This is happening on an iPod Touch with iOS 8.2, but it is also happening on several iPhone 6 devices with both iOS 8.2 and 8.3). However, this does not occur on Android. Thus, it seems reasonable to believe this is native iOS issue rather than an Ionic/Cordova issue (or, it may be an issue with the way Ionic interacts with iOS).
At 0:22 you'll that once the user zooms in, then the user can actually move the crop box.
Another update (this is important)
Only when taking a photo does this bug occur. When you select an existing photo from your library, the crop tool works as expected...
iOS has a built in cropping tool if you enable allowsEditing on your UIImagePickerController
UIImagePickerController *imagePicker = [[UIImagePickerController alloc] init];
[imagePicker setAllowsEditing:YES];
If you want a different cropping tool you are going to have to make your own or use an open source project.
Here are some projects:
https://github.com/dzenbot/DZNPhotoPickerController
https://github.com/ruslanskorb/RSKImageCropper
https://github.com/kishikawakatsumi/PEPhotoCropEditor
In our company hybrid mobile app we use ng-image crop. https://github.com/jodonnell-broadsoft/JsImageCrop
It allows users to take photos of images in android and ios using the camera plugin and then lets them crop the image (we use it for documents). We then upload the image to our server.
Here is what our final version looks like. Also it is super smooth and easy to use.
Once you include the ng-image crop, then inject the dependencies this is all the code you use
<div class="cropArea" ng-style="cropHeight">
<img-Crop image="image.uncropped" result-image="image.cropped" result-image-format="image/png" area-type="rectangle" on-change="console.log($scope.image.cropped)">
</img-Crop>
</div>
I have a web application (using AngularJS) in which users can upload a profile picture and before saving the image they can adjust they photo with some cropping tool.
The issue is that when I'm uploading photos taken with an iPhone in portrait mode, all this images are rotated 90 degrees. The only way that images are uploaded correctly is if the user takes the picture in landscape mode (iPhone oriented with volume buttons pointing down).
I need a solution to make this work, no matter phone orientation when taking pictures.
My example
I see a number of ways to deal with layouts, and interchange, etc to deal with image sizes, but I haven't come across any info about video player size. For instance, using viewbix, voo, jw, or any other js served video player, the size of the player is built into the embed. It also has an associated image file for the poster frame.
Just wondering how other folks approach this. Do you make multiple versions of the embed and image for various breakpoint sizes? Does it matter if the embed is too big? Not sure if that actually affects streaming speed or not, or if the video itself is technically doing anything until play is pressed. Image would still be an issue though as serving a full width desktop size image on a 320px screen seems a waste.
What's the smart way to handle this globally?
thx
With the JW Player, we have responsive support built into the player - http://www.jwplayer.com/blog/new-in-jw-player-responsive-design/, so you don't need to worry about breakpoints, media queries, or anything like that. Those would all still be handled in your CSS.
jwplayer("myResponsiveVideo").setup({
file: "/assets/tearsofsteel.mp4",
image: "/assets/tearsofsteel.jpg",
width: "100%",
aspectratio: "12:5"
});
Basically a set up like this will make the player responsive, regardless of what container it is in.