We Keep Coding

'img-src' was not explicitly set, so 'default-src' is used as a fallback

Here is my Content-Security-Policy in index.html
<meta http-equiv="Content-Security-Policy" content="default-src 'self' http://example.com">
Now i am dynamically setting img src of <img id="updateProfilePicPreview" class="profilPicPreview" src="" /> as
var smallImage = document.getElementById('updateProfilePicPreview');
smallImage.style.display = 'block';
smallImage.src = "data:image/jpeg;base64," + imageData;
It shows
Refused to load the image 'data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDACgcHiMeGSgjISMtKygw…p+tB/yaKKAIi2TSfjRRVCJFOyIk96rE5NFFDGgoooqBhRRRQA9elIDg5oopgIc+lFFFAH/2Q==' because it violates the following Content Security Policy directive: "default-src 'self' http://example.com". Note that 'img-src' was not explicitly set, so 'default-src' is used as a fallback.
So how can i enable setting img src dynamically ?
I was following this example from cordova page:
var pictureSource; // picture source
var destinationType; // sets the format of returned value
// Wait for device API libraries to load
//
document.addEventListener("deviceready",onDeviceReady,false);
// device APIs are available
//
function onDeviceReady() {
pictureSource=navigator.camera.PictureSourceType;
destinationType=navigator.camera.DestinationType;
}
// Called when a photo is successfully retrieved
//
function onPhotoDataSuccess(imageData) {
// Uncomment to view the base64-encoded image data
// console.log(imageData);
// Get image handle
//
var smallImage = document.getElementById('smallImage');
// Unhide image elements
//
smallImage.style.display = 'block';
// Show the captured photo
// The in-line CSS rules are used to resize the image
//
smallImage.src = "data:image/jpeg;base64," + imageData;
}
// Called when a photo is successfully retrieved
//
function onPhotoURISuccess(imageURI) {
// Uncomment to view the image file URI
// console.log(imageURI);
// Get image handle
//
var largeImage = document.getElementById('largeImage');
// Unhide image elements
//
largeImage.style.display = 'block';
// Show the captured photo
// The in-line CSS rules are used to resize the image
//
largeImage.src = imageURI;
}
// A button will call this function
//
function capturePhoto() {
// Take picture using device camera and retrieve image as base64-encoded string
navigator.camera.getPicture(onPhotoDataSuccess, onFail, { quality: 50,
destinationType: destinationType.DATA_URL });
}
// A button will call this function
//
function capturePhotoEdit() {
// Take picture using device camera, allow edit, and retrieve image as base64-encoded string
navigator.camera.getPicture(onPhotoDataSuccess, onFail, { quality: 20, allowEdit: true,
destinationType: destinationType.DATA_URL });
}
// A button will call this function
//
function getPhoto(source) {
// Retrieve image file location from specified source
navigator.camera.getPicture(onPhotoURISuccess, onFail, { quality: 50,
destinationType: destinationType.FILE_URI,
sourceType: source });
}
// Called if something bad happens.
//
function onFail(message) {
alert('Failed because: ' + message);
}

So how can i enable setting img src dynamically ?
The problem is not setting the src, the problem is setting the src to a data: scheme URI.
Add data: to the list of things allowed by the content security policy. Either for the default-src or you could define a separate img-src.
In the example below, I have added img-src 'self' data:; to the start of the meta tag in the index.html file.
<meta http-equiv="Content-Security-Policy" content="img-src 'self' data:; default-src 'self' http://XX.XX.XX.XX:8084/mypp/">

How to get the size of the camera image in cordova-camera

So, I am using this cordova camera plugin to take a picture using the camera. As my app has almost 10 div's which would fire the camera, I would want to configure the server for the size of binary string I am sending. I tried the following code and it printed binary string instead of file size
navigator.camera.getPicture(onSuccess, onFail, { quality: 50,
destinationType: Camera.DestinationType.DATA_URL
});
function onSuccess(imageData) {
//var finalimage = "data:image/jpeg;base64," + imageData;
window.resolveLocalFileSystemURI(imageData, function(fileEntry) {
fileEntry.file(function(fileObj) {
console.log("Size = " + fileObj.size);
});
});
This code is giving me great binary string as output instead of file size. Now I have the other concern too, in the comment above I am converting the image to base 64, so will there be any change in the file size between final image and imageData?

use the function
var pictureSource; // picture source
var destinationType; // sets the format of returned value
// Wait for device API libraries to load
//
document.addEventListener("deviceready", onDeviceReady, false);
// device APIs are available
//
function onDeviceReady() {
pictureSource = navigator.camera.PictureSourceType;
destinationType = navigator.camera.DestinationType;
function capturePhotoEdit() {
// Take picture using device camera, allow edit, and retrieve image as base64-encoded string
navigator.camera.getPicture(onPhotoDataSuccess, onFail, {
quality: 20,
allowEdit: true,
destinationType: destinationType.DATA_URL
});
}
and use in the function "allow edit"
You will get the full edit and crop option.
!!
var pictureSource; // picture source
var destinationType; // sets the format of returned value
// Wait for device API libraries to load
//
document.addEventListener("deviceready", onDeviceReady, false);
// device APIs are available
//
function onDeviceReady() {
pictureSource = navigator.camera.PictureSourceType;
destinationType = navigator.camera.DestinationType;
}
// Called when a photo is successfully retrieved
//
var x = 0;
function onPhotoDataSuccess(imageURI) {
x++;
// Uncomment to view the base64-encoded image data
console.log(imageURI);
alert(imageURI);
// Get image handle
//
var y = 'smallImage' + x;
var smallImage = document.getElementById(y);
// Unhide image elements
//
smallImage.style.display = 'block';
// Show the captured photo
// The in-line CSS rules are used to resize the image
//
smallImage.src = "data:image/jpeg;base64," + imageURI;
}
// Called when a photo is successfully retrieved
//
var z = 0;
function onPhotoURISuccess(imageURI) {
z++;
// Uncomment to view the image file URI
console.log(imageURI);
alert(imageURI);
// Get image handle
//
var w = 'largeImage' + z;
var largeImage = document.getElementById(w);
// Unhide image elements
//
largeImage.style.display = 'block';
// Show the captured photo
// The in-line CSS rules are used to resize the image
//
largeImage.src = imageURI;
}
// A button will call this function
//
function capturePhoto() {
// Take picture using device camera and retrieve image as base64-encoded string
navigator.camera.getPicture(onPhotoDataSuccess, onFail, {
quality: 50,
destinationType: destinationType.DATA_URL
});
}
// A button will call this function
//
function capturePhotoEdit() {
// Take picture using device camera, allow edit, and retrieve image as base64-encoded string
navigator.camera.getPicture(onPhotoDataSuccess, onFail, {
quality: 20,
allowEdit: true,
destinationType: destinationType.DATA_URL
});
}
// A button will call this function
//
function getPhoto(source) {
// Retrieve image file location from specified source
navigator.camera.getPicture(onPhotoURISuccess, onFail, {
quality: 50,
allowEdit: true,
destinationType: destinationType.FILE_URI,
sourceType: source
});
}
// Called if something bad happens.
//
function onFail(message) {
alert('Failed because: ' + message);
}

Setting Image retrieved from Cordova Camera Plugin in IMG tag

I am trying to use the Apache Cordova Camera API for displaying the image retrieved from the camera. I am getting the camera call, and able to click the picture. I am getting the file url as
file:///mnt/.....something.jpg
Now, I am not able to set this image in an existing image tag, using jQuery.
The Code I have used is:
$("#img").attr("src", "data:image/jpeg;base64," + imageData);
where imageData is the return value of the camera success callback.
The Options for Cordova Image function, which I am using
destinationType = 0;
sourceType = 1;
encodingType = 0;
There is no image which comes up on the tag.
What can be the issue here?

This a quick example about how this should work:
function changePhoto(){
var cameraSuccess = function(imageURI){
//add dummy param to disable caching
var random = Math.floor(Math.random()*1000);
var newImagePath = imageURI + "?dummy=" + random;
$("#img").attr("src",newImagePath);
};
var cameraError = function(msg){
alert(msg);
};
navigator.camera.getPicture( cameraSuccess, cameraError, {
quality: 50,
destinationType: Camera.DestinationType.FILE_URI,
sourceType: Camera.PictureSourceType.PHOTOLIBRARY
});
},

Cordova camera PictureSourceType PHOTOLIBRARY v SAVEDPHOTOALBUM

None of this values working to launch the photo gallery in a phonegap application for android!!!
When the getPicture method is invoked with any of this values it does not pull up the photo gallery.
I build the app using the phonegap build cloud services
Please help,
sample code -
function getPhoto(source) {
alert("getting photo");
// Retrieve image file location from specified source
navigator.camera.getPicture(onPhotoURISuccess, onFail, { destinationType: destinationType.FILE_URI, sourceType: source });
}

Camera.PictureSourceType.PHOTOLIBRARY == entire library
Camera.PictureSourceType.SAVEDPHOTOALBUM == camera photo album
If you want users to upload any image on their phone stick to PHOTOLIBRARY.
Or if you want users to upload only the pictures taken by the phone camera then use SAVEDPHOTOALBUM.

May be below line of codes help you out.
function getImage()
{
// Retrieve image file location from specified source
navigator.camera.getPicture(onCapturePhotoSuccess, onCapturePhotoError,{ quality: 80,
destinationType: navigator.camera.DestinationType.DATA_URL,
sourceType: navigator.camera.PictureSourceType.PHOTOLIBRARY
});
}
function onCapturePhotoSuccess(imageURI)
{
var smallImage = document.getElementById('id_for_setting_pic_somewhere_in_html');
smallImage.src = "data:image/jpeg;base64," + imageURI;
}
function onCapturePhotoError(message)
{
console.log('Captured Failed because: ' + message);
}

Selecting Multiple photos from a device's image gallery using PhoneGap

I was able to build a test app based on the camera.getPicture full example in PhoneGap's documentation. It allows me to take a photo or retrieve a photo from the gallery and place it in a div.
However, I want to be able to select multiple images from the gallery and place each in its own div. Can anyone point me in the right direction to learn how to accomplish this?
Thanks.
Here is the javascript I'm using:
var pictureSource; // picture source
var destinationType; // sets the format of returned value
// Wait for PhoneGap to connect with the device
document.addEventListener("deviceready",onDeviceReady,false);
// PhoneGap is ready to be used!
function onDeviceReady() {
pictureSource=navigator.camera.PictureSourceType;
destinationType=navigator.camera.DestinationType;
}
// Called when a photo is successfully retrieved
function onPhotoDataSuccess(imageData) {
var largeImage = document.getElementById('largeImage');
largeImage.style.display = 'block';
largeImage.src = "data:image/jpeg;base64," + imageData;
}
function onPhotoURISuccess(imageURI) {
var largeImage = document.getElementById('largeImage');
largeImage.style.display = 'block';
largeImage.src = imageURI;
}
// A button will call this function
function capturePhoto() {
//add new div
var newPhoto = document.createElement("div");
newPhoto.id = "div";
newPhoto.className ="photo";
newPhoto.innerHTML = "<img id='largeImage' src='' />";
document.getElementById("photos").appendChild(newPhoto);
// Take picture using device camera and retrieve image as base64-encoded string
navigator.camera.getPicture(onPhotoDataSuccess, onPhotoURISuccess, onFail, { quality: 50 });
}
// A button will call this function
function getPhoto(source) {
//add new div
// Retrieve image file location from specified source
navigator.camera.getPicture(onPhotoURISuccess, onFail, { quality: 50,
destinationType: destinationType.FILE_URI,
sourceType: source });
}
// Called if something bad happens.
function onFail(message) {
alert('Failed because: ' + message);

As of Phonegap 3.5 there is no support for selecting multiple images at the same time. You will need to write or find a plugin that will work with the native code to enable you to do this. Here is the issue described in the Phonegap development plan. https://issues.apache.org/jira/browse/CB-1215
I am working on doing this as well. Here is a link for an Android solution.
http://webcache.googleusercontent.com/search?q=cache:http://www.technotalkative.com/android-select-multiple-photos-from-gallery/

you need to create the div dynamically after every photo is taken.
Your success callback would be something like this:
function onPhotoDataSuccess(imageData) {
// the following is all one line.
document.getElementById("photos").innerHTML+=
"<div>\
<img src=\"data:image/jpeg;base64,"+imageData+"\">\
</div>";
}
then you can style all the imgs via css using something like this
#photos > div {
width: 100px;
margin:10px;
float:left;
}