In my app I have a functionality of clicking an image from camera plugin and then navigate to a different view and show the image there. I am saving the dataurl of the image in localStorage and then in the other view I am calling the getItem method to get the dataurl of the image clicked. After that I am assigning this dataurl to src of the image to be shown in the view. But the problem is that the image is not showing!!
I checked the localstorage while debugging, the dataurl is there under localStorage.
What can be the problem, and how to solve it ??
Controller for initiating the camera...
init_camera: function() {
var controller = this;
navigator.camera.getPicture(onSuccess, onFail, {
quality: 80,
destinationType: Camera.DestinationType.DATA_URL
});
function onSuccess(imageData) {
var image = document.getElementById('myImage');
image.src = "data:image/jpeg;base64," + imageData;
localStorage.setItem('initial', image.src);
controller.redirectTo('Preview');
}
function onFail(message) {
alert('Failed because: ' + message);
}
}
Code to get the dataurl in the other view.. (in ExtJS)
items: [{
xtype: 'image',
cls: 'prev_img',
src: localStorage.getItem('initial'),
flex: 2
},
Related
I have an issue with phonegap and iOS 9, this was working fine with ios 8, When you click on the file input it shows a cancel button in the middle of the screen that does nothing when tapped. The file input works fine in safari but in my built app, it doesn't.
I realize that there is a phonegap file uploader API, but I am using my app as a web browser to the mobile version of my website, so I haven't built a fully native app, this was a quick solution for me.
This could be because of the new action sheet style or the new option added to the action sheet in ios 9.
Does anyone have a solution that I can skip the action sheet and when clicking the input file I go directly to the camera roll? Or any fix for this?
I moved to the plugin - cordova-plugin-camera and this solved the problem.
After click on input type file:
e.preventDefault();
navigator.notification.confirm(
'Please select image', // message
function (buttonIndex) {
if (buttonIndex === 1) {
photoFromSource(navigator.camera.PictureSourceType.CAMERA);
} else {
photoFromSource(navigator.camera.PictureSourceType.PHOTOLIBRARY);
}
}, // callback to invoke with index of button pressed
'Image capture', // title
['Camera', 'Gallery'] // buttonLabels
);
function photoFromSource(source) {
var targetWidth = 640,
targetHeight = 640,
onSuccess = function (imageURI) {
var image = new Image(),
canvas = document.createElement('canvas'),
canvasContext = canvas.getContext('2d');
image.onload = function () {
canvas.width = image.width;
canvas.height = image.height;
canvasContext.drawImage(image, 0, 0, image.width, image.height);
var dataURL = canvas.toDataURL();
self.model.set('imageData', dataURL);
self.model.setDataAttr('image', true);
self.render();
};
image.src = imageURI;
},
onFail = function (message) {
// Ignore if no image seleted
if (!/^no image selected$/.test(message))
alert('Failed because: ' + message);
},
opts = {
quality: 50,
destinationType: navigator.camera.DestinationType.FILE_URI,
sourceType: source,
mediaType: navigator.camera.MediaType.PICTURE,
targetWidth: targetWidth,
targetHeight: targetHeight,
encodingType: navigator.camera.EncodingType.JPEG,
correctOrientation: true,
cameraDirection: navigator.camera.Direction.BACK,
saveToPhotoAlbum: false
};
try {
navigator.camera.getPicture(onSuccess, onFail, opts);
}
catch (e) {
alert('Could not capture image: ' + e);
}
};
Introduction
Process flow
So, I'm making a web application, where users should be able to upload an image and crop it:
The user selects a local image
An object url is created from the image
The object url is the source of an <img>
Jcrop is applied to this <img>
The selected crop area is drawn into a canvas
A data url is created from this canvas
This data url is written into a file which is stored on the server
Problems
The size of the cropped area stored in the canvas is multiple times bigger than the one of the original image
When I eventually try to write the decoded data url into a file I get the 500 Internal Server Error
Code
Note: Code is simplified
event_handlers.js
jQuery('#my_upload_input').change(function(my_event)
{
my_load_image(my_event.currentTarget.files);
});
jQuery(document).keyup(function(my_event)
{
if (my_event.which == 13)
{
my_crop_image();
}
});
image_handling.js
var my_file_glob;
var my_image_glob;
var my_jcrop_api_glob;
function my_load_image(my_files)
{
var my_file_glob = my_files[0];
var my_image_glob = new Image();
my_image_glob.onload = function()
{
my_show_image();
};
my_image_glob.src = URL.createObjectURL(my_file_glob);
}
function my_show_image()
{
jQuery('#my_container').html('<img id="my_img" src="' + my_image_glob.src + '" />');
jQuery('#my_img').Jcrop(
{
boxWidth: 1280,
boxHeight: 720,
trueSize: [my_image_glob.width, my_image_glob.height],
setSelect: [0, 0, 1920, 1080],
aspectRatio: 1920 / 1080,
minSize: [1920, 1080],
bgColor: '',
allowSelect: false
}, function()
{
my_jcrop_api_glob = this;
});
}
function my_crop_image()
{
if (typeof my_jcrop_api_glob !== 'undefined')
{
var my_selection = my_jcrop_api_glob.tellSelect();
var my_canvas = document.createElement('canvas');
var my_canvas_context = my_canvas.getContext('2d');
my_canvas.width = my_selection.w;
my_canvas.height = my_selection.h;
my_canvas_context.drawImage(my_image_glob, my_selection.x, my_selection.y, my_selection.w, my_selection.h, 0, 0, my_selection.w, my_selection.h);
my_upload_canvas(my_canvas);
}
}
function my_upload_canvas(my_canvas)
{
var my_canvas_url = my_canvas.toDataURL('image/png');
jQuery.ajax(
{
type: 'POST',
url: 'ajax_calls.php',
data:
{
my_canvas_url: my_canvas_url
},
success: function(my_response)
{
alert(my_response);
window.location.reload(true);
}
});
}
ajax_calls.js
if(isset($_POST['my_canvas_url']))
{
$my_canvas_url = $_POST['my_canvas_url'];
my_upload_canvas($my_canvas_url);
}
function my_upload_canvas($my_canvas_url)
{
$my_canvas_data_enc = explode(',', $my_canvas_url)[1];
$my_canvas_data_enc = str_replace(' ', '+', $my_canvas_data_enc);
$my_canvas_data_dec = base64_decode($my_canvas_data_enc);
file_put_contents(dirname(__FILE__) . '/menu.png', $my_canvas_data_dec);
if($my_png_created !== false)
{
echo 'success';
}
else
{
echo 'failure';
}
}
Additional
In the function my_upload_canvas(my_canvas), I've written these few lines to compare the size of the original image and the cropped area:
var head = 'data:image/png;base64,';
var imgfilesize = Math.round((my_canvas_url.length - head.length) * 3 / 4);
console.log('size orig: ' + Math.round(my_file_glob.size));
console.log('size crop: ' + Math.round(imgfilesize));
console.log('cropped area is ' + Math.round(imgfilesize / my_file_glob.size) + ' times bigger than the original image');
The outputs for three different images are the following:
JPEG (807 KB)
size orig: 826730
size crop: 2445081
cropped area is 3 times bigger than the original image
JPG (141 KB)
size orig: 144837
size crop: 1201146
cropped area is 8 times bigger than the original image
PNG (334 KB)
size orig: 342617
size crop: 53799
cropped area is 0 times bigger than the original image
Note that the sizes of the cropped areas of image #1 and #2 are bigger than the ones of the original images themselves, but not for image #3.
Update #1
The 500 Internal Server Error was caused by the $ in front of the function plugins_url()...silly me. But, unfortunately, saving the .png still won't work (I can't even create the file). Introduction and code updated.
Update #2
Uploading the image works now! I replaced
file_put_contents(plugins_url('/menu.png', __FILE__), $my_canvas_data_dec)
with
file_put_contents(dirname(__FILE__) . '/menu.png', $my_canvas_data_dec)
as apparently a URL won't work, but a full path will. Introduction and code updated.
Update #3
Mystery solved! As you can read here, the canvas contains no more information than the pixels of the image. Therefore the size of the data url depends on how the browser encodes these pixels and can result in being larger than the one of the image. Furthermore, a PNG will in most cases be much larger than a JPEG of the same canvas.
I figured it out myself. Please have a look at the updates of my post if you're interested in the answers.
I'm using Phonegap's getPicture() method to save the File URI to an image, which I then try to display in an img element, but can't. Here's more detail.
I have a view with the following image element: <img id='myImage' ng-src="{{imageSrc}}" style='width:320px;display:block'/>
When I push a button in the view it calls the getPhoto() method in the view's controllers. Here's the code for the controller:
.controller('captureController',function($scope,$rootScope,$state,$document){
$scope.getPhoto = function() {
navigator.camera.getPicture(
captureSuccess,
captureError,
{
quality:5,
destinationType: Camera.DestinationType.FILE_URI,
sourceType: Camera.PictureSourceType.CAMERA,
encodingType: Camera.EncodingType.PNG
}
);
}
function captureSuccess(imageURI) {
var image = document.getElementById('myImage');
$rootScope.imageSrc=imageURI
$rootScope.$apply()
alert($rootScope.imageSrc)
}
function captureError(error) {
var msg = 'An error occurred during capture: ' + error.code;
alert('there was an error')
}
})
When I take a picture, the resulting alert returns the path to the photo (file:///var/mobile/Applications//tmp/cdv_photo_069.png), but the photo doesn't appear in the image element.
I've verified that photos are in the phone's tmp directory,and I've also tried replacing the image element's ng-src attribute with src="file:///....cdv_photo.png". The image element is still not rendering the picture.
Any advice would be greatly appreciated.
I have this snippet that captures a photo from a camera and output it in a base64 string.
function onPhotoDataSuccess(imageData) {
console.log("Image Data: "+imageData);
var smallImage = document.getElementById('smallImage');
smallImage.style.display = 'block';
smallImage.src = "data:image/jpeg;base64," + imageData;
console.log("Src:" + smallImage.src);
}
When I look at the console log, the first log Image Data isn't complete, but the second Src log is longer.
Here is the log for Image Data:
09-18 17:00:24.591: D/CordovaLog(12097):
file:///android_asset/www/upload.html: Line 57 :
Image Data: /9j/4AAQSkZJRgABAQAAAQABAAD/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkz
And for the Src I'm getting (You can decode it as well, nothing interesting):
09-18 17:00:24.630: D/CordovaLog(12097):
file:///android_asset/www/upload.html: Line 71 :
Src:data:image/jpeg;base64,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
You can see by using the same variable imageData in both logs, I can't get the result to be the same.
And, if you decode the base64 string in Src, the image isn't complete.
Anyone know how to fix this?
EDIT: jsfiddle showing the decoding of the base64
EDIT: <img> tag inside HTML body:
<img style="display:none;width:300px" id="smallImage" src="" />
I would suggest you to use destination type as FILE_URI and get the base64 from the method described below
Setting destination type as FILe-URI is the recommended approach as you can see it in their docs
http://docs.phonegap.com/en/2.5.0/cordova_camera_camera.md.html
Specify Destination Type as FILE_URI itself and in imagedata you will be getting the images file uri place it in a image tag and then place it inside HTML5 canvas and canvas has one method called toDataURL where you will be able to get the base64 of the corresponding image.
check the below code
function onPhotoDataSuccess(imageData)
{
var $img = $('<img/>');
$img.attr('src', imageData);
$img.css({position: 'absolute', left: '0px', top: '-999999em', maxWidth: 'none', width: 'auto', height: 'auto'});
$img.bind('load', function()
{
var canvas = document.createElement("canvas");
canvas.width = $img.width();
canvas.height = $img.height();
var ctx = canvas.getContext('2d');
ctx.drawImage($img[0], 0, 0);
var dataUri = canvas.toDataURL('image/png');
});
$img.bind('error', function()
{
console.log('Couldnt convert photo to data URI');
});
}
I'm a jQuery novice, so the answer to this may be quite simple:
I have an image, and I would like to do several things with it.
When a user clicks on a 'Zoom' icon, I'm running the 'imagetool' plugin (http://code.google.com/p/jquery-imagetool/) to load a larger version of the image. The plugin creates a new div around the image and allows the user to pan around.
When a user clicks on an alternative image, I'm removing the old one and loading in the new one.
The problem comes when a user clicks an alternative image, and then clicks on the zoom button - the imagetool plugin creates the new div, but the image appears after it...
The code is as follows:
// Product Zoom (jQuery)
$(document).ready(function(){
$("#productZoom").click(function() {
// Set new image src
var imageSrc = $("#productZoom").attr("href");
$("#productImage").attr('src', imageSrc);
// Run the imagetool plugin on the image
$(function() {
$("#productImage").imagetool({
viewportWidth: 300,
viewportHeight: 300,
topX: 150,
topY: 150,
bottomX: 450,
bottomY: 450
});
});
return false;
});
});
// Alternative product photos (jQuery)
$(document).ready(function(){
$(".altPhoto").click(function() {
$('#productImageDiv div.viewport').remove();
$('#productImage').remove();
// Set new image src
var altImageSrc = $(this).attr("href");
$("#productZoom").attr('href', altImageSrc);
var img = new Image();
$(img).load(function () {
$(this).hide();
$('#productImageDiv').append(this);
$(this).fadeIn();
}).error(function () {
// notify the user that the image could not be loaded
}).attr({
src: altImageSrc,
id: "productImage"
});
return false;
});
});
It seems to me, that the imagetool plugin can no longer see the #productImage image once it has been replaced with a new image... So I think this has something to do with binding? As in because the new image is added to the dom after the page has loaded, the iamgetool plugin can no longer use it correctly... is this right?
If so, any ideas how to deal with it?
Wehey! I've sorted it out myself...
Turns out if I remove the containing div completely, and then rewrite it with .html, the imagetool plugin recognises it again.
Amended code for anyone who's interested:
$(document).ready(function(){
// Product Zoom (jQuery)
$("#productZoom").click(function() {
$('#productImage').remove();
$('#productImageDiv').html('<img src="" id="productImage">');
// Set new image src
var imageSrc = $("#productZoom").attr("href");
$("#productImage").attr('src', imageSrc);
// Run the imagetool plugin on the image
$(function() {
$("#productImage").imagetool({
viewportWidth: 300,
viewportHeight: 300,
topX: 150,
topY: 150,
bottomX: 450,
bottomY: 450
});
});
return false;
});
// Alternative product photos (jQuery)
$(".altPhoto").click(function() {
$('#productImageDiv div.viewport').remove();
$('#productImage').remove();
// Set new image src
var altImageSrc = $(this).attr("href");
// Set new image Zoom link (from the ID... is that messy?)
var altZoomLink = $(this).attr("id");
$("#productZoom").attr('href', altZoomLink);
var img = new Image();
$(img).load(function () {
$(this).hide();
$('#productImageDiv').append(this);
$(this).fadeIn();
}).error(function () {
// notify the user that the image could not be loaded
}).attr({
src: altImageSrc,
id: "productImage"
});
return false;
});
});
You could try abstracting the productZoom.click() function to a named function, and then re-binding it after changing to an alternate image. Something like:
// Product Zoom (jQuery)
$(document).ready(function(){
$("#productZoom").click(bindZoom);
// Alternative product photos (jQuery)
$(".altPhoto").click(function() {
$('#productImageDiv div.viewport').remove();
$('#productImage').remove();
// Set new image src
var altImageSrc = $(this).attr("href");
$("#productZoom").attr('href', altImageSrc);
var img = new Image();
$(img).load(function () {
$(this).hide();
$('#productImageDiv').append(this);
$(this).fadeIn();
}).error(function () {
// notify the user that the image could not be loaded
}).attr({
src: altImageSrc,
id: "productImage"
});
$("#productZoom").click(bindZoom);
return false;
});
});
function bindZoom() {
// Set new image src
var imageSrc = $("#productZoom").attr("href");
$("#productImage").attr('src', imageSrc);
// Run the imagetool plugin on the image
$(function() {
$("#productImage").imagetool({
viewportWidth: 300,
viewportHeight: 300,
topX: 150,
topY: 150,
bottomX: 450,
bottomY: 450
});
});
return false;
}
Also, rolled both your ready() blocks into the same block.
First, i have one question, are the .altPhoto links or images? Cause if its images then this line is wrong
var altImageSrc = $(this).attr("href");
it should be
var altImageSrc = $(this).attr("src");
its the only thing i could find in a glance