Not sure what would be causing this, but when I upload some images to my remote server via FileTransfer(), the images sometimes show up either sideways or upside down. However, when I view the images locally on the iPhone, they are positioned in the correct way.
For example, when I select an image like this to upload: http://sharefa.st/view/WBe2QNSK8r8z
It will turn out like this: http://sharefa.st/view/EWdW1Z4G8r8z
I am using the local path to transfer the file, so I don't understand why the image would rotate "randomly".
Here is my upload function:
function uploadPhoto() {
var options = new FileUploadOptions();
options.fileKey = 'file';
options.fileName = imgURI.substr(imgURI.lastIndexOf('/')+1);
options.mimeType = 'image/jpeg';
var params = new Object();
if(logged_in == true) {
params.unique_id = app_unique_id;
params.secret_key = user_secret_key;
}
options.params = params;
loadingStart();
var ft = new FileTransfer();
ft.upload(imgURI, 'http://' + remote_server + '/API/upload', uploadDetails, fail, options);
}
imgURI value looks like this:
file://localhost/var/mobile/Applications/<snip>/tmp/photo_015.jpg
Any insight is appreciated.
Thanks to Humanoidism pointing out that the issue was in fact with the iPhone, and the way it stored images, I was able to figure out a solutuion.
To upload photos in the correct orientation you must add the correctOrientation setting to the options array in getPicture(), and set it to true.
Here are two examples:
function capturePhoto() {
navigator.camera.getPicture(onPhotoDataSuccess, onFail, { quality: 30, correctOrientation: true });
}
function getPhoto(source) {
navigator.camera.getPicture(onPhotoURISuccess, onFail, { quality: 30,
destinationType: destinationType.FILE_URI,
sourceType: source,
correctOrientation: true });
}
The problem is not PhoneGap but iPhone. The iPhone was designed to be used as a wide lens camera. Turn the phone sideways when taking pictures or capturing video if you intend to view them on desktop. Your phone will display them correctly, because it "knows" how you took them, but the computer that you're viewing it on dosen't.
What you could do to prevent this is to rotate the picture before the upload. This is not a recommended fix but at least people on desktop computers will be able to see it. Though when viewing them on iPhone they'll be rotated - maybe a check for mobile devices wether or not to rotate the image could come in handy - but still again, not recommended.
Related
I am making an app where an photo is taken and sent to the server, but the files that get sent are of low quality. It seems that when I take a photo using iOS native camera app it come out as a very sharp picture, but when using PhoneGap it reduces the quality massively.
I have set the image quality to 100 etc:
function capturePhoto() {
// Take picture using device camera and retrieve image as base64-encoded string
navigator.camera.getPicture(onPhotoURISuccess, onPhotoURIFail, {
quality: 100,
destinationType: Camera.DestinationType.FILE_URI,
//destinationType: Camera.DestinationType.DATA_URL,
//destinationType: Camera.DestinationType.NATIVE_URI,
sourceType : Camera.PictureSourceType.CAMERA,
correctOrientation: true,
saveToPhotoAlbum: true,
encodingType: Camera.EncodingType.PNG
});
}
But still seems to give a real blurry image.
Has anyone else had this problem? I have also tried using the DATA_URL to get the base64 encoded image, but this makes the app go so slow that I couldn't get to a stage to send to the server.
Is there a way to use the original LOSSLESS file?
Thanks
function capturePhoto() {
navigator.camera.getPicture(onPhotoURISuccess, onPhotoURIFail, {
quality: 50,
destinationType: Camera.DestinationType.FILE_URI,
sourceType : Camera.PictureSourceType.CAMERA,
correctOrientation: false,
encodingType: Camera.EncodingType.PNG,
targetWidth: 1500,
targetHeight: 1500
});
}
Im not sure why mine wouldn't work before, but it may have been because I was trying it on my iPad? I can't quite remember if I had the same problem with my iPhone also at that time.
Also the way the imageURI is retrieved may have made a difference, not sure about that either, but here is my code to get the image URI:
function onPhotoURISuccess(imageURI){
$('#imagePreview img.smallImage').attr("src", imageURI);
}
And then just get the URI from the image when you want to send. It prety much exactly like all the examples but for some reason didn't work before.
Make sure you have your plugins using the latest version too. That's about it!
I want to show, on a site that accepts only bbcode, a snapshot of a section of an external site. This section is constantly changing so I want to know if there's a way to automatically take a snapshot and save it to any server as same image so it's always updating on the bbcode-only site. Any help?
Really sorry if it's a duplicate, I tried my best searching.
You can use phantomJS for doing it.
var webPage = require('webpage');
var page = webPage.create();
page.viewportSize = { width: 1920, height: 1080 };
page.open("http://www.google.com", function start(status) {
page.render('google_home.jpeg', {format: 'jpeg', quality: '100'});
phantom.exit();
});
PhantomJS
Here is the problem :
I have a canvas, and four (would be more in future, but 4 for testing...anyway, doesn't matter) images that can be "poped" into the canvas by clicking on it.
Each image can be present multiple times in the canvas.
So far, poping is working fine, images are draggable... But I can't add some resize or zIndex function as I can only select the last image add to the canvas.
In a ideal world, I would like, by clicking/dragging an image, put it on top of the canvas, and kinda "select" it, so that I can connect the resize functions to the image.
But with the array of images, I can't manage to identify properly the item dragged, and can't use (or don't manage to use) the selectors.
Thank you.
EDIT : some code
var imgCpt = 0;
var image = [];
function addDetails(img) {
imgCpt++;
var imageObj = new Image();
imageObj.onload = function() {
image[imgCpt] = new Kinetic.Image({
x: 0,
y: 0,
image: imageObj,
draggable: true,
id:image[imgCpt]
});
image[imgCpt].setX((stage.getWidth()/2) - (image[imgCpt].getWidth()/2));
image[imgCpt].setY((stage.getHeight()/2) - (image[imgCpt].getHeight()/2));
eval(image[imgCpt]).on('click', function() {
alert(eval(imgCpt));
});
layer.add(image[imgCpt]);
stage.add(layer);
};
imageObj.src = 'uploads/'+img;
}
I've already tried different solutions : multiple layer, and acting on it instead of acting on image, working with shapes filled with image instead of image, but it's always the same problem : I can't get the id of the concerned element (instead of the id of the last insert element)
This version works with array, but I tried yersterday to build the image id with eval(); without more success.
Thank you for your help
EDIT² : sorry to insist, but I would really be glad to have some assistance on this point, even if I think it's more JS related than pure KineticJS related.
Thank you.
Ok Guys, just solved the problem :
eval("image["+imgCpt+"].on('click', function() {alert("+imgCpt+");});");
Instead of :
eval(image[imgCpt]).on('click', function() {
alert(eval(imgCpt));
});
Now time to set a true action behind the click.
Thank you for helping ;)
I'm building a mobile website which lets users upload photos from their camera.
I can get images from the users albums, and I can get images when the user takes a photo in iOS6 on iPhone4 and Android 4, but when the user takes a photo with an iPhone5 (also using iOS6), I get nothing. I can get the image from the users photo albums, but not when taking a photo.
here's the code and jsfiddle below
$('input#file_api').change(function(evt){
var image = evt.target.files[0];
var reader = new FileReader();
reader.onerror = (function(){alert('error reading file')});
reader.onload = (function(theFile) {
return function(e) {
// Render thumbnail.
var tempImg = new Image();
tempImg.src = reader.result;
tempImg.onload = function(){
var canvas = document.createElement('canvas');
canvas.width=tempImg.width;
canvas.height=tempImg.height;
var ctx = canvas.getContext("2d");
ctx.drawImage(tempImg,0,0);
$('body').append(canvas);
})(image);
reader.readAsDataURL(image);
I've got an example here http://jsfiddle.net/8DJUy/4/
If you use the file picker to get a photo, it will append the photo to the page.
If you take a photo with an iPhone5, it won't append anything. But at the same time, it doesn't error out either.
Any suggestions on how to get around this?
I can't quite figure out what the problem is with grabbing the photo.
The reason I'm grabbing the photos like this is that the file sizes are quite large when uploaded directly from the phone, and the use case does not require high resolution images, so I'm using the canvas to resize the image before uploading it.
Try this instead:
ctx.drawImage(tempImg, 0, 0, canvas.width, canvas.height);
I'm using the toolbarbutton library, because the normal widgets would not store their positions if I restart Firefox.
Unfortunately I want to change the icon on runtime. With the widgets I did:
widget.contentURL = "http://127.0.0.1:8082/static/icons/eth_16.png";
With the toolbarbuttons I tried:
Toolbarbutton.image = "http://127.0.0.1:8082/static/icons/eth_16.png";
without any effect. The image seems to be only used when construction the toolbarbutton.
Also tried to destroy and recreate the button with a different icon, but that causes annoying flickering.
Any idea would be appreciated.
I did a quick test and this should work as expected so I'm not sure what issue you're running into here. Here's some example code that works just fine:
var toolbarbutton = require("toolbarbutton");
var timer = require("timer");
var TEST_ICON_M_URL = "http://www.mozilla.org/media/img/favicon.png";
var TEST_ICON_G_URL = "http://www.google.com//images/google_favicon_128.png";
console.log("TEST_ICON_URL", TEST_ICON_M_URL);
var options = {
id: "test-tbb",
label: "TEST BUTTON",
toolbarID: "nav-bar",
image: TEST_ICON_M_URL,
forceMove: true
};
var tbb = toolbarbutton.ToolbarButton(options);
tbb.moveTo(options);
timer.setTimeout(function () {
tbb.image = TEST_ICON_G_URL;
console.log("switched", TEST_ICON_G_URL);
}, 5 * 1000); // 5 seconds
Is there more code you could post? The problem must be somewhere else.