[jira] [Commented] (CB-12512) No way to get from a FILE_URL to a DATA_URL onsuccess
[
https://issues.apache.org/jira/browse/CB-12512?page=com.atlassian.jira.plugin.system.issuetabpanels:comment-tabpanel&focusedCommentId=15888435#comment-15888435
]
Kerri Shotts commented on CB-12512:
---
See inline below:
{quote}
1. We were working under the assumption that PNGs have better compression than
other image formats, it doesn't matter much the encoding as long as the data is
saved, PNG/JPEG can be utilized as PNG or JPEG when displaying the image later.
We have switched over to using JPEG in this application to use less memory.
{quote}
PNGs are great for images with lots of data duplication -- essentially computer
graphics. This is why icons are typically in PNG format -- they usually have a
small(-ish) number of colors, and those colors typically come in long runs, all
of which lends itself to great lossless compression. Photographic data,
however, isn't favorable because it's using millions of colors, and there's
very little chance of having long runs in the data.
It's not always 100% applicable, but I tend to live by this rule: photographic
images & images with lots of detail & color = JPEG, simplified computer
graphics = PNG.
{quote}
2. I've tested this without errors where on Android we take a JPEG and then
display with the data:image/png;base64 preamble but this isn't much of a
concern on our end.
{quote}
I'd suggest using the correct preamble since one can't anticipate when using
the incorrect preamble might break. The view must be using format detection to
render the image correctly, but there's always the possibility that some web
view out there on some device at some point might break. Besides, it helps
future devs who come across the code -- they might be wondering about how
things are managing to work with the preamble mismatch.
{quote}
3. No we do not need full-resolution images. This is a simple low quality image
just to verify that something happened with picture proof. I have set the
targetWidth and targetHeight each to 600. I can also verify the aspect ration
isn't a problem as all images captured fill to the view width and follows the
CSS rules properly for displaying within our application.
{quote}
Good; this is the fastest way to reducing the amount of data that has to be
stored & that has to traverse the bridge. Glad it's working for you.
I'm going to go ahead and close the issue. Good luck with your project.
> No way to get from a FILE_URL to a DATA_URL onsuccess
> -
>
> Key: CB-12512
> URL: https://issues.apache.org/jira/browse/CB-12512
> Project: Apache Cordova
> Issue Type: Bug
> Components: Plugin Camera, Plugin File
> Environment: Android 4.0+ / iOS 9.0+
>Reporter: Kyle Slack
>
> The onsuccess function of the getPicture method uses the FILE_URI to set an
> source perfectly fine, however, the conversion of this FILE_URI to get
> the image data or DATA_URL is never successful no matter the means attempted.
> Even utilizing your posted methods to get the actual file have failed:
> window.resolveLocalFileSystemURL(imgUri, function success(fileEntry) - is not
> getting to the image, always results in null DATA_URL in the end.
> Our method using FILE_URI:
> {code}
> navigator.camera.getPicture(function (data) {
> setTimeout(function () {
> StatusBar.overlaysWebView(true);
> setTimeout(function () {
> StatusBar.overlaysWebView(false);
> }, 250);
> }, 250);
> viewModel.txtImageStatus("Loading...");
> document.getElementById("image").src = data;
> viewModel.showNoImage(false);
> document.getElementById("image").style.display = "block";
> SavetoShipment(data);
> }, function (msg) {
> if (!msg == "Camera cancelled.") {
> viewModel.popVisible(true);
> viewModel.popMessage("Failed: " + msg);
> };
> setTimeout(function () {
> StatusBar.overlaysWebView(true);
> setTimeout(function () {
> StatusBar.overlaysWebView(false);
> }, 250);
> }, 250);
> }, {
> quality: DevExpress.devices.real().platform == "ios" ? 50 : 100,
> destinationType: Camera.DestinationType.FILE_URI,
> saveToPhotoAlbum: false,
> correctOrientation: true,
> encodingType: DevExpress.devices.real().platform == "ios" ?
> Camera.EncodingType.PNG : Camera.EncodingType.JPEG
> });
> function SavetoShipment(fileURI) {
> var fileReader = new FileReader();
> fileReader.onload = function (fileLoad) {
> viewModel.shipment.CustomerPhotoInfo = fileLoad.target.result;
> };
> fileReader.readAsDataURL(fi
[jira] [Commented] (CB-12512) No way to get from a FILE_URL to a DATA_URL onsuccess
[
https://issues.apache.org/jira/browse/CB-12512?page=com.atlassian.jira.plugin.system.issuetabpanels:comment-tabpanel&focusedCommentId=15887981#comment-15887981
]
Kyle Slack commented on CB-12512:
-
1. We were working under the assumption that PNGs have better compression than
other image formats, it doesn't matter much the encoding as long as the data is
saved, PNG/JPEG can be utilized as PNG or JPEG when displaying the image later.
We have switched over to using JPEG in this application to use less memory.
2. I've tested this without errors where on Android we take a JPEG and then
display with the data:image/png;base64 preamble but this isn't much of a
concern on our end.
3. No we do not need full-resolution images. This is a simple low quality image
just to verify that something happened with picture proof. I have set the
targetWidth and targetHeight each to 600. I can also verify the aspect ration
isn't a problem as all images captured fill to the view width and follows the
CSS rules properly for displaying within our application.
Thank you very much for the help. At this point I believe this code is properly
handling both Android and iOS camera interactions perfectly with a DATA_URL
return:
viewModel.getPicture = function () {
navigator.camera.getPicture(function (data) {
//use setTimeout especially w/ iOS to allow time for the UI to
replace/resize the controls and statusbar
setTimeout(function () {
StatusBar.overlaysWebView(true);
setTimeout(function () {
StatusBar.overlaysWebView(false);
}, 250);
}, 250);
viewModel.txtImageStatus("Loading...");
document.getElementById("image").src = "data:image/png;base64," +
data;
viewModel.showNoImage(false);
document.getElementById("image").style.display = "block";
viewModel.shipment.CustomerPhotoInfo = data;
}, function (msg) {
if (!msg == "Camera cancelled.") {
viewModel.popVisible(true);
viewModel.popMessage("Failed: " + msg);
};
setTimeout(function () {
StatusBar.overlaysWebView(true);
setTimeout(function () {
StatusBar.overlaysWebView(false);
}, 250);
}, 250);
}, {
quality: 30,
destinationType: Camera.DestinationType.DATA_URL,
targetWidth: 600,
targetHeight: 600,
saveToPhotoAlbum: false,
correctOrientation: true,
encodingType: Camera.EncodingType.JPEG
});
}
> No way to get from a FILE_URL to a DATA_URL onsuccess
> -
>
> Key: CB-12512
> URL: https://issues.apache.org/jira/browse/CB-12512
> Project: Apache Cordova
> Issue Type: Bug
> Components: Plugin Camera, Plugin File
> Environment: Android 4.0+ / iOS 9.0+
>Reporter: Kyle Slack
>
> The onsuccess function of the getPicture method uses the FILE_URI to set an
> source perfectly fine, however, the conversion of this FILE_URI to get
> the image data or DATA_URL is never successful no matter the means attempted.
> Even utilizing your posted methods to get the actual file have failed:
> window.resolveLocalFileSystemURL(imgUri, function success(fileEntry) - is not
> getting to the image, always results in null DATA_URL in the end.
> Our method using FILE_URI:
> {code}
> navigator.camera.getPicture(function (data) {
> setTimeout(function () {
> StatusBar.overlaysWebView(true);
> setTimeout(function () {
> StatusBar.overlaysWebView(false);
> }, 250);
> }, 250);
> viewModel.txtImageStatus("Loading...");
> document.getElementById("image").src = data;
> viewModel.showNoImage(false);
> document.getElementById("image").style.display = "block";
> SavetoShipment(data);
> }, function (msg) {
> if (!msg == "Camera cancelled.") {
> viewModel.popVisible(true);
> viewModel.popMessage("Failed: " + msg);
> };
> setTimeout(function () {
> StatusBar.overlaysWebView(true);
> setTimeout(function () {
> StatusBar.overlaysWebView(false);
> }, 250);
> }, 250);
> }, {
> quality: DevExpress.devices.real().platform == "ios" ? 50 : 100,
> destinationType: Camera.DestinationType.FILE_URI,
> saveToPhotoAlbum: false,
> correctOrientation: true,
> encodingType: DevExpress.devices.real().platform == "ios" ?
> Camera.EncodingType.PNG : Camera.EncodingType
[jira] [Commented] (CB-12512) No way to get from a FILE_URL to a DATA_URL onsuccess
[
https://issues.apache.org/jira/browse/CB-12512?page=com.atlassian.jira.plugin.system.issuetabpanels:comment-tabpanel&focusedCommentId=15886592#comment-15886592
]
Kerri Shotts commented on CB-12512:
---
1. Why are you using PNGs? These are horrible for photographs -- they take up a
large amount of memory and do not compress well.
2. Make sure you use the correct preamble for the image type;
data:image/png;base64 is not appropriate for JPEGs (and vice versa).
3. Do you need the full-resolution image taken? If not, set the {{targetWidth}}
and {{targetHeight}} options to a reasonable value. The smaller the image you
request, the smaller the resulting DATA_URL will be (and thus, the faster the
image can be rendered). You do not need to worry about aspect ratio; the
returned image will fit within the width & height specified.
> No way to get from a FILE_URL to a DATA_URL onsuccess
> -
>
> Key: CB-12512
> URL: https://issues.apache.org/jira/browse/CB-12512
> Project: Apache Cordova
> Issue Type: Bug
> Components: Android, iOS
> Environment: Android 4.0+ / iOS 9.0+
>Reporter: Kyle Slack
>
> The onsuccess function of the getPicture method uses the FILE_URI to set an
> source perfectly fine, however, the conversion of this FILE_URI to get
> the image data or DATA_URL is never successful no matter the means attempted.
> Even utilizing your posted methods to get the actual file have failed:
> window.resolveLocalFileSystemURL(imgUri, function success(fileEntry) - is not
> getting to the image, always results in null DATA_URL in the end.
> Our method using FILE_URI:
> {code}
> navigator.camera.getPicture(function (data) {
> setTimeout(function () {
> StatusBar.overlaysWebView(true);
> setTimeout(function () {
> StatusBar.overlaysWebView(false);
> }, 250);
> }, 250);
> viewModel.txtImageStatus("Loading...");
> document.getElementById("image").src = data;
> viewModel.showNoImage(false);
> document.getElementById("image").style.display = "block";
> SavetoShipment(data);
> }, function (msg) {
> if (!msg == "Camera cancelled.") {
> viewModel.popVisible(true);
> viewModel.popMessage("Failed: " + msg);
> };
> setTimeout(function () {
> StatusBar.overlaysWebView(true);
> setTimeout(function () {
> StatusBar.overlaysWebView(false);
> }, 250);
> }, 250);
> }, {
> quality: DevExpress.devices.real().platform == "ios" ? 50 : 100,
> destinationType: Camera.DestinationType.FILE_URI,
> saveToPhotoAlbum: false,
> correctOrientation: true,
> encodingType: DevExpress.devices.real().platform == "ios" ?
> Camera.EncodingType.PNG : Camera.EncodingType.JPEG
> });
> function SavetoShipment(fileURI) {
> var fileReader = new FileReader();
> fileReader.onload = function (fileLoad) {
> viewModel.shipment.CustomerPhotoInfo = fileLoad.target.result;
> };
> fileReader.readAsDataURL(fileURI);
> }
> {code}
--
This message was sent by Atlassian JIRA
(v6.3.15#6346)
-
To unsubscribe, e-mail: issues-unsubscr...@cordova.apache.org
For additional commands, e-mail: issues-h...@cordova.apache.org
[jira] [Commented] (CB-12512) No way to get from a FILE_URL to a DATA_URL onsuccess
[
https://issues.apache.org/jira/browse/CB-12512?page=com.atlassian.jira.plugin.system.issuetabpanels:comment-tabpanel&focusedCommentId=15886191#comment-15886191
]
Kyle Slack commented on CB-12512:
-
This is in fact the goal, to store the DATA_URL for later viewing outside of
the mobile application. We have, as a workaround, switched back to the DATA_URL
as the problem seems to be specifically related to the quality value being
passed in the camera options. We have set this to 30 and can successfully use
the DATA_URL method on Android. However, on iOS, this method is proving to not
be successful. Where Android is working pretty smoothly now with the DATA_URL
option, iOS is now taking around 6 seconds or more delayed between views in our
application following capturing a photo. It seems to take the photo and
displays in our element just fine. I noticed while debugging that on iOS
when the camera is fired, the following error is logged immediately:
Failed to load resource: The requested URL was not found on this server.
file:///var/containers/Bundle/Application/(UUID)/(application
name.app)/www/null
Updated Code:
viewModel.getPicture = function () {
navigator.camera.getPicture(function (data) {
//use setTimeout especially w/ iOS to allow time for the UI to
replace/resize the controls and statusbar
setTimeout(function () {
StatusBar.overlaysWebView(true);
setTimeout(function () {
StatusBar.overlaysWebView(false);
}, 250);
}, 250);
viewModel.txtImageStatus("Loading...");
document.getElementById("image").src = "data:image/png;base64," +
data;
viewModel.showNoImage(false);
document.getElementById("image").style.display = "block";
viewModel.shipment.CustomerPhotoInfo = data;
}, function (msg) {
if (!msg == "Camera cancelled.") {
viewModel.popVisible(true);
viewModel.popMessage("Failed: " + msg);
};
setTimeout(function () {
StatusBar.overlaysWebView(true);
setTimeout(function () {
StatusBar.overlaysWebView(false);
}, 250);
}, 250);
}, {
quality: 30,
destinationType: Camera.DestinationType.DATA_URL,
saveToPhotoAlbum: false,
correctOrientation: true,
encodingType: DevExpress.devices.real().platform == "ios" ?
Camera.EncodingType.PNG : Camera.EncodingType.JPEG
});
}
> No way to get from a FILE_URL to a DATA_URL onsuccess
> -
>
> Key: CB-12512
> URL: https://issues.apache.org/jira/browse/CB-12512
> Project: Apache Cordova
> Issue Type: Bug
> Components: Android, iOS
> Environment: Android 4.0+ / iOS 9.0+
>Reporter: Kyle Slack
>
> The onsuccess function of the getPicture method uses the FILE_URI to set an
> source perfectly fine, however, the conversion of this FILE_URI to get
> the image data or DATA_URL is never successful no matter the means attempted.
> Even utilizing your posted methods to get the actual file have failed:
> window.resolveLocalFileSystemURL(imgUri, function success(fileEntry) - is not
> getting to the image, always results in null DATA_URL in the end.
> Our method using FILE_URI:
> {code}
> navigator.camera.getPicture(function (data) {
> setTimeout(function () {
> StatusBar.overlaysWebView(true);
> setTimeout(function () {
> StatusBar.overlaysWebView(false);
> }, 250);
> }, 250);
> viewModel.txtImageStatus("Loading...");
> document.getElementById("image").src = data;
> viewModel.showNoImage(false);
> document.getElementById("image").style.display = "block";
> SavetoShipment(data);
> }, function (msg) {
> if (!msg == "Camera cancelled.") {
> viewModel.popVisible(true);
> viewModel.popMessage("Failed: " + msg);
> };
> setTimeout(function () {
> StatusBar.overlaysWebView(true);
> setTimeout(function () {
> StatusBar.overlaysWebView(false);
> }, 250);
> }, 250);
> }, {
> quality: DevExpress.devices.real().platform == "ios" ? 50 : 100,
> destinationType: Camera.DestinationType.FILE_URI,
> saveToPhotoAlbum: false,
> correctOrientation: true,
> encodingType: DevExpress.devices.real().platform == "ios" ?
> Camera.EncodingType.PNG : Camera.EncodingType.JPEG
> });
> function SavetoShipment(fileURI) {
> var fileRead
[jira] [Commented] (CB-12512) No way to get from a FILE_URL to a DATA_URL onsuccess
[
https://issues.apache.org/jira/browse/CB-12512?page=com.atlassian.jira.plugin.system.issuetabpanels:comment-tabpanel&focusedCommentId=15886044#comment-15886044
]
Kerri Shotts commented on CB-12512:
---
To your particular issue (see
https://cordova.apache.org/docs/en/latest/reference/cordova-plugin-file/index.html#read-a-file
for an example using the first two):
1. Try using {{onloadend}} instead; this occurs when the operation is complete.
2. {{onload}} / {{onloadend}} don't receive any data directly. Use
{{this.result}} instead.
3. If you must have a DATA_URL, why not just get it straight from the camera
plugin? The caveats with base64 apply equally regardless of where you're
getting it from.
> No way to get from a FILE_URL to a DATA_URL onsuccess
> -
>
> Key: CB-12512
> URL: https://issues.apache.org/jira/browse/CB-12512
> Project: Apache Cordova
> Issue Type: Bug
> Components: Android, iOS
> Environment: Android 4.0+ / iOS 9.0+
>Reporter: Kyle Slack
>
> The onsuccess function of the getPicture method uses the FILE_URI to set an
> source perfectly fine, however, the conversion of this FILE_URI to get
> the image data or DATA_URL is never successful no matter the means attempted.
> Even utilizing your posted methods to get the actual file have failed:
> window.resolveLocalFileSystemURL(imgUri, function success(fileEntry) - is not
> getting to the image, always results in null DATA_URL in the end.
> Our method using FILE_URI:
> {code}
> navigator.camera.getPicture(function (data) {
> setTimeout(function () {
> StatusBar.overlaysWebView(true);
> setTimeout(function () {
> StatusBar.overlaysWebView(false);
> }, 250);
> }, 250);
> viewModel.txtImageStatus("Loading...");
> document.getElementById("image").src = data;
> viewModel.showNoImage(false);
> document.getElementById("image").style.display = "block";
> SavetoShipment(data);
> }, function (msg) {
> if (!msg == "Camera cancelled.") {
> viewModel.popVisible(true);
> viewModel.popMessage("Failed: " + msg);
> };
> setTimeout(function () {
> StatusBar.overlaysWebView(true);
> setTimeout(function () {
> StatusBar.overlaysWebView(false);
> }, 250);
> }, 250);
> }, {
> quality: DevExpress.devices.real().platform == "ios" ? 50 : 100,
> destinationType: Camera.DestinationType.FILE_URI,
> saveToPhotoAlbum: false,
> correctOrientation: true,
> encodingType: DevExpress.devices.real().platform == "ios" ?
> Camera.EncodingType.PNG : Camera.EncodingType.JPEG
> });
> function SavetoShipment(fileURI) {
> var fileReader = new FileReader();
> fileReader.onload = function (fileLoad) {
> viewModel.shipment.CustomerPhotoInfo = fileLoad.target.result;
> };
> fileReader.readAsDataURL(fileURI);
> }
> {code}
--
This message was sent by Atlassian JIRA
(v6.3.15#6346)
-
To unsubscribe, e-mail: issues-unsubscr...@cordova.apache.org
For additional commands, e-mail: issues-h...@cordova.apache.org
