I am having issue in camera code of phonegap,
navigator.camera.getPicture(onSuccess, onFail, {
quality: 75,
sourceType : Camera.PictureSourceType.CAMERA,
encodingType: Camera.EncodingType.JPEG,
targetWidth: 100,
targetHeight: 100,
destinationType: Camera.DestinationType.DATA_URL
});
in above code if I use targetWidth and targetHeight 500 or more I am not able to get ImageData full.
function onSuccess(imageData) {
var startImageData= "data:image/jpeg;base64," + imageData;
console.log('startImageData--->>>>>>'+startImageData);
}
What should I do so I can get full "startImageData".
Basically what I observed is I am getting near about 4000 characters.What I need is whole imagedata which may contain more than 15000 characters.
Thanks In advance.
Hi in the success function should be something like below in ur code just try this console.log(imageData); inside success function its should give the imagedata as expected..
function onPhotoURISuccess(imageURI) {
var largeImage = document.getElementById('largeImage');
largeImage.style.display = 'block';
largeImage.src = imageURI;
console.log(imageURI);
}
Related
Trying take a picture and upload it to firebase storage.
Here is my code;
import { Camera, CameraOptions } from '#ionic-native/camera';
async takePhoto() {
try{
const options: CameraOptions = {
quality: 50,
targetHeight: 600,
targetWidth: 600,
destinationType: this.camera.DestinationType.DATA_URL,
encodingType: this.camera.EncodingType.JPEG,
mediaType: this.camera.MediaType.PICTURE
}
const result = await this.camera.getPicture(options);
const image= `data:image/jpeg;based64,${result}`;
const pictures=storage().ref(`ProfilePictures/${this.myUid}`);
pictures.putString(image, `data_url`);
}
catch(e) {
console.error(e);
}
}
But it uploads a file that is not image actually. And it uploads a corrupted file even if I download it, I can't open it because its not an image.
Here is my firebase storage
thanks for reading please assist me
This may not be your problem as it's hard to say what the specific issue is but I've had similar issues in the past with image uploads, try this:
let result = await this.camera.getPicture(options);
result = result.replace(/(\r\n|\n|\r)/gm,"");
const image= `data:image/jpeg;based64,${result}`;
.replace(/(\r\n|\n|\r)/gm,"") removes all the newlines from the returned data.
Hope this helps.
takePhoto() {
const options: CameraOptions = {
quality: 50,
targetHeight: 600,
targetWidth: 600,
destinationType: this.camera.DestinationType.DATA_URL,
encodingType: this.camera.EncodingType.JPEG,
mediaType: this.camera.MediaType.PICTURE
}
this.camera.getPicture(options).then((imageData) => {
let base64Image = 'data:image/jpeg;base64,' + imageData;
const pictures=storage().ref(`ProfilePictures/${this.myUid}`);
pictures.putString(base64Image, `data_url`);
}, (err) => {
}).present();
});
}
thats the way i solved the problem
I'm using intern.js to test a web app. I can execute tests and create screenshots when they fail. I want to create a screenshot for specific element in order to do some CSS regression testing using tools like resemble.js. Is it possible? How can I do? Thank you!
driver.get("http://www.google.com");
WebElement ele = driver.findElement(By.id("hplogo"));
//Get entire page screenshot
File screenshot = ((TakesScreenshot)driver).getScreenshotAs(OutputType.FILE);
BufferedImage fullImg = ImageIO.read(screenshot);
//Get the location of element on the page
Point point = ele.getLocation();
//Get width and height of the element
int eleWidth = ele.getSize().getWidth();
int eleHeight = ele.getSize().getHeight();
//Crop the entire page screenshot to get only element screenshot
BufferedImage eleScreenshot= fullImg.getSubimage(point.getX(), point.getY(), eleWidth,
eleHeight);
ImageIO.write(eleScreenshot, "png", screenshot);
//Copy the element screenshot to disk
File screenshotLocation = new File("C:\\images\\GoogleLogo_screenshot.png");
FileUtils.copyFile(screen, screenshotLocation);
Taken from here.
There isn't a built in way to do this with Intern. The takeScreenshot method simply calls Selenium's screenshot service, which returns a screenshot of the entire page as a base-64 encoded PNG. Intern's takeScreenshot converts this to a Node buffer before handing the result to the user.
To crop the image you will need to use an external library or tool such as png-crop (note that I've never used this). The code might look like the following (untested):
var image;
var size;
var position;
return this.remote
// ...
.takeScreenshot()
.then(function (imageBuffer) {
image = imageBuffer;
})
.findById('element')
.getSize()
.then(function (elementSize) {
size = elementSize;
})
.getPosition()
.then(function (elementPosition) {
position = elementPosition;
})
.then(function () {
// assuming you've loaded png-crop as PNGCrop
var config = {
width: size.width,
height: size.height,
top: position.y,
left: position.x
};
// need to return a Promise since PNGCrop.crop is an async method
return new Promise(function (resolve, reject) {
PNGCrop.crop(image, 'cropped.png', config, function (err) {
if (err) {
reject(err);
}
else {
resolve();
}
});
});
})
I am using google map api. I am having an issue with Google base map. When i load Google hybrid or aerial, it gives me following result.
https://www.dropbox.com/s/u51hegt7hu03gz9/Untitled.png?dl=0
Some tiles are missing on the map.
Missing tiles: https://www.dropbox.com/s/5vlp86xf4iote32/Untitled2.png?dl=0
My code is:
google.maps.event.addListener(mapA, 'maptypeid_changed', function () {
var mapTypeId = mapA.getMapTypeId();
if (mapTypeId != "basemap")
mapTileSource = [];
if (mapTypeId == google.maps.MapTypeId.HYBRID) {
mapTileSource.push("http://khm1.google.com/kh/v=134&x={0}&y={1}&z={2}&s=Gal");
mapTileSource.push("http://mt0.google.com/vt/lyrs=h#177290279&hl=en&x={0}&y={1}&z={2}&s=Gal");
}
else if (mapTypeId == google.maps.MapTypeId.ROADMAP) {
mapTileSource.push("http://mt1.google.com/vt/lyrs=m#113&hl=hu&x={0}&y={1}&z={2}&s=Gal");
}
else if (mapTypeId == google.maps.MapTypeId.SATELLITE) {
mapTileSource.push("http://khm1.google.com/kh/v=134&x={0}&y={1}&z={2}&s=Gal");
}
else if (mapTypeId == google.maps.MapTypeId.TERRAIN) {
mapTileSource.push("http://mt1.google.com/vt/lyrs=t#131,r#176163100&hl=en&x={0}&y={1}&z={2}&s=Gal");
}
});
Some tiles are missing on the view.
I have tried this:
function CoordMapType(tileSize) {
debugger;
this.tileSize = tileSize;
}
CoordMapType.prototype.getTile = function (coord, zoom, ownerDocument) {
var div = ownerDocument.createElement('div');
div.innerHTML = coord;
div.style.width = this.tileSize.width + 'px';
div.style.height = this.tileSize.height + 'px';
div.style.fontSize = '10';
div.style.borderStyle = 'solid';
div.style.borderWidth = '1px';
div.style.borderColor = '#AAAAAA';
return div;
};
mapA.overlayMapTypes.insertAt(0, new CoordMapType(new google.maps.Size(256, 256)));
And i have also tried this:
google.maps.event.addListenerOnce(mapA, 'tilesloaded', function() {
google.maps.event.addListenerOnce(mapA, 'tilesloaded', function() {
google.maps.event.trigger(mapA, 'resize');
});
});
But they did not work for me.
Can anyone please tell me the way to load all the tiles on the map?
Thank you
Try set higher version (the number after m# or h# etc.) and use url directly in web broswer (check if tile in this version exists)
http://mt1.google.com/vt/lyrs=m#901000000&hl=en&x=4&y=10&z=5&s=Ga
or check your cache layer (if you use)
In my option for googleSatellite :
get error - http://khm0.google.com/kh/v=149&hl=en&x=18&y=9&z=5&s=Galileo
******* ok - http://khm0.google.com/kh/v=165&hl=en&x=18&y=9&z=5&s=Galileo
Here's a working example of mapbox with google maps hybrid satellite view: https://github.com/SnakeO/mapbox-with-google-maps-hybrid-tiles
I am trying to publish forum replies to a specific thread, but I would like those reply documents to include extra information about the user that posted it.
I don't want to "save" that extra information on the reply itself but rather, publish an "improved" version of it.
I am doing something similar on client-side already with mycollection.find().map() and using the map function to embedded extra information on each of the returned documents, however, Meteor publish cannot seem to publish an array, only a Cursor, so the simple map function is off limits.
Is there a way to achieve this? Maybe a "map" function that returns a Cursor?
I am not using Meteor.methods so that I can have reactivity, because with them I could just return an array and use it as normal.
Here is an example of my code (that fails, but sends gives an idea of what I need):
Meteor.publish("forumthread", function(thread){
return forumReplies.find({thread: thread}).map(function(r){
// lets fill in additional data about each replies owner
var owner = Meteor.users.findOne({_id: r.owner});
if(!owner)
return; // no owner no reply..
if(!owner.forumStats){
owner.forumStats = {};
owner.forumStats.postCount = 0;
owner.forumStats.postLikes = 0;
owner.forumStats.title = "The Newbie";
owner.forumStats.tag = "Newbie";
Meteor.users.update({_id: owner._id}, {$set:{ forumStats:owner.forumStats }});
}
r.ownerid = owner._id;
r.ownerUsername = owner.username;
r.ownerPostCount = owner.forumStats.postCount;
r.ownerPostLikes = owner.forumStats.postLikes;
r.ownerTitle = owner.forumStats.title;
r.ownerTag = owner.forumStats.tag;
return r;
});
});
Thank you.
Ended up doing this (found out that Christian Fritz also suggested it):
Meteor.publish("serverforumthread", function(thread){
check(thread, String);
var replies = forumReplies.find({thread: thread});
var users = {};
replies.map(function(r){
users[r.owner] = r.owner;
});
var userids = _.map(users, function(value, key){ return value; });
var projectedFields = {_id:1, username:1, forumStats: 1, services: 0};
var usrs = Meteor.users.find({_id:{$in: userids}}, projectedFields);
var anyUpdateToUsers = false;
usrs.map(function(owner){
var changed = false;
if(!owner.username){
owner.username = owner.emails[0].address.split("#")[0];
changed = true;
}
//owner.forumStats = undefined;
if(!owner.forumStats){
owner.forumStats = {};
owner.forumStats.postCount = 0;
owner.forumStats.postLikes = 0;
owner.forumStats.title = "the newbie";
owner.forumStats.tag = "newbie";
owner.forumStats.img = "http://placehold.it/122x122";
changed = true;
}
if(changed){
anyUpdateToUsers = true;
Meteor.users.update({_id: owner._id}, {$set:{ forumStats:owner.forumStats }});
}
});
if(anyUpdateToUsers) // refresh it
usrs = Meteor.users.find({_id:{$in: userids}}, projectedFields);
usrs.map(function(owner){
console.log(owner);
});
return [replies, usrs];
});
It works great with the following client side:
Template.forumReplyOwner.helpers({
replyOwner: function(reply){
var owner = Meteor.users.findOne({_id: reply.owner});
console.log(reply, owner);
if(!owner || !owner.forumStats) return; // oh shait!
var r = {};
r.owner = owner._id;
r.ownerUsername = owner.username;
r.ownerPostCount = owner.forumStats.postCount;
r.ownerPostLikes = owner.forumStats.postLikes;
r.ownerTitle = owner.forumStats.title;
r.ownerTag = owner.forumStats.tag;
r.ownerImg = owner.forumStats.img;
return r;
},
ownerImgTab: function(){
return {src: this.ownerImg};
}
});
However, I am now facing another problem. Even tho I am restricting the fields I am publishing from the Users collection, it is still sending down the "services" field, that contains login data that shouldnt be sent, ideas?
I have the following javascript:
function callback(results, status) {
if (status == google.maps.places.PlacesServiceStatus.OK) {
for (var i = 0; i < results.length; i++) {
place = new Object ({
name: results[i].name,
photo: results[i].photos[0].getUrl({'maxWidth': 100, 'maxHeight': 100}),
loc: results[i].geometry.location,
rating: results[i].rating,
})
places.push(place);
var marker = new google.maps.Marker({
map: map,
position: results[i].geometry.location,
id: i,
visible: false,
});
markers.push(marker);
}
}
newresult();
}
If i comment out the following line the function newresult() will run:
photo: results[i].photos[0].getUrl({'maxWidth': 100, 'maxHeight': 100}),
However, as in the above code, if i do not comment it out the function newresult() will not run. I know that the getUrl function of photo works as it returns a valid url.
Thanks for any help.
I know that the getUrl function of photo works as it returns a valid
url.
Yes, IF there is a photo associated with the place! No photo for a place = no photo array in the results[i] object. And then your code breaks. You must in each iteration check if the photo array is present before using it :
place = new Object ({
name: results[i].name,
photo: typeof results[i].photos !== 'undefined'
? results[i].photos[0].getUrl({'maxWidth': 100, 'maxHeight': 100})
: '' //alternative a "nophoto.jpg"
loc: results[i].geometry.location,
rating: results[i].rating,
});
Here a fiddle based on your code from above -> http://jsfiddle.net/dX9Gu/