Just a doubt about camera pictures (iOS/android/windows)
//take a picture
Ti.Media.showCamera({
saveToPhotoGallery:false,
success:function(event) {
if(event.mediaType == Ti.Media.MEDIA_TYPE_PHOTO) {
$.preview.image = event.media;
//insert on attachments table
database.insert('attachments',{
name:'test',
extension:'',
file:Ti.Utils.base64encode(event.media).toString()
});
}
}
});
When I send the picture to my backoffice, I need to send also the file extension, but there is no file, only the string of the encoded picture that I saved in a local SQLite table.
How do I get this extension, or it's required to save the image on the app directory?
You can set any image extension you want ! (PNG, jPEG ,..) , as you see data returned from camera is Blob ! , you don`t have to save the image local first just upload it to your server !
Related
I would like to change all mediathumbnail.url image (first image of the post) in blogger website as follows.
Replace s72-c to s300-c
or
Replace s1600 to s300-c
However i want to change all featured images to s300-c
Please help me to find out a way to do it !
Use this JavaScript function to resize your images
function resizeImage(img, size, newsize) {
return img.replace(size, newsize)
}
resizeImage(media$thumbnail.url, 's72', 's300-c');
// media$thumbnail.url is your media URL getting from the blogger feed
Here is an example of an image tag with the image source as base 64 data. The base 64 data is a smiley face.
<img src="data:image/png;base64,R0lGODlhDAAMAKIFAF5LAP/zxAAAANyuAP/gaP///wAAAAAAACH5BAEAAAUALAAAAAAMAAwAAAMlWLPcGjDKFYi9lxKBOaGcF35DhWHamZUW0K4mAbiwWtuf0uxFAgA7">
I want to use base64 data to create an image file in Google Drive.
I've tried the following code, which runs, and creates a file with no errors, but it won't open as an image file.
function createImageFileFromBase64() {
var data = 'R0lGODlhDAAMAKIFAF5LAP/zxAAAANyuAP/gaP///wAAAAAAACH5BAEAAAUALAAAAAAMAAwAAAMlWLPcGjDKFYi9lxKBOaGcF35DhWHamZUW0K4mAbiwWtuf0uxFAgA7';
var imageBlob = Utilities.newBlob(data, 'image/png');
var resource = {
title: 'AAA Test_Image',
mimeType: 'image/png'
}
var theReturn = Drive.Files.insert(resource,imageBlob );
Logger.log('file ID: ' + theReturn.id);
}
My goal is to make an image file without making an external request to an image file. I want the image data to be "hard coded" into the script.
Create the blob using byte array created by decoding the base64 string:
var imageBlob = Utilities.newBlob(Utilities.base64Decode(data), 'image/png');
I'm building a web app with AngularJS that will allow users to upload their own images. Right now all of my data is text based, so I am storing the text based data in Firebase. As far as I know, Firebase can't store images. What I want to do is store the user generated images somewhere simple (I'm thinking Amazon S3 or even Dropbox) and then reference the images via unique URLs, which I would store as text in Firebase.
My questions:
Does this seem like a valid approach?
Any recommended services for hosting the images?
How to upload an image to the hosting service and get the image's unique URL?
Right now I am allowing users to upload images on the front end with the following code, just not sure what to do with the images once I have them. Would appreciate any help, I'm very new to this!
HTML
<output id="list"></output>
<input type="file" id="files" name="files[]" class="button" multiple />
Upload Pictures</i>
Angular Controller
$scope.getImages = function(){
$("input[type='file']").trigger('click');
}
function handleFileSelect(evt) {
var files = evt.target.files; // FileList object
// Loop through the FileList and render image files as thumbnails.
for (var i = 0, f; f = files[i]; i++) {
console.log(f);
// Only process image files.
if (!f.type.match('image.*')) {
continue;
}
var reader = new FileReader();
// Closure to capture the file information.
reader.onload = (function(theFile) {
return function(e) {
// Render thumbnail.
var span = document.createElement('span');
span.innerHTML = ['<img class="thumb" src="', e.target.result,
'" title="', escape(theFile.name), '"/>'].join('');
document.getElementById('list').insertBefore(span, null);
};
})(f);
// Read in the image file as a data URL.
reader.readAsDataURL(f);
}
}
document.getElementById('files').addEventListener('change', handleFileSelect, false);
You could use a service like Cloudinary to host images uploaded by your users. There are Angular directives that making using the service pretty easy. You will need a small server-side component to encrypt the upload parameters.
Look into Zapier integration with S3. The idea is that you setup a queue collection in firebase where you would create a new instance with the binary of the file data. Then zapier listens to for child_added on this queue collection and does it's magic (that you don't have to worry about) to upload your file to S3 bucket. After everything is finished, the instance in the queue is deleted... No server side needed with that, except there might be some fees...
Here is the link https://zapier.com/zapbook/amazon-s3/
I am saving images of my aplication into gridfs. The problem becomes when I need to show the image. I don't know how can i do it. I'm using node.js, geddy framework and mongodb.
this.show = function (req, resp, params) {
var self = this;
var GridFS = require('GridFS').GridFS;
var myFS = new GridFS('resources');
//recupero la imagen
myFS.get(params.id,function(err,data){
});
myFS.close();
params.id is the image id. When i do console.log(data) I recive:
Buffer <90 f8 w8 dj 4f....>
How can I do to respond the image in png format to the view?
thanks...a lot!
I've never used geddy at all, but you might want to look at this:
Render Image Stored in Mongo (GridFS) with Node + Jade + Express
The basic idea is to set the right "Content-Type" header ("image/png" should work) and simply reply to the request with the image data.
Your browser can render the image if you're using an <img src="/url/to/your/image/request/handler">... tag in the html.
You can't console.log image data with most shells / command lines, sorry. ;)
just imagine your profile on facebook. when changing your avatar, you select a new picture, crop it and then safe it. after that, the new avatar is displayed in your profile.
on my website i want do provide the same service - which allready works.
but: i am not able to display the new and(!) cropped avatar right after creating it (with php). i can only display the new, but uncropped one. after refreshing my site, every thing works fine.
$("div#button2").click(function() {
//Thumbnail is created externally with php
//the name of the new cropped avatar is the same like the uncropped one
//i just change the picture, but the url is the same!
$.post("upload_thumbnail.php", {
bild: bild,
format: format,
x: x,
y: y,
w: w,
h: h
});
//delete the old avatar
$.post("upload_loeschen.php", {
bild: bildalt
});
//save the url of the new cropped avatar in the database
$.post("upload_update.php", {
bild: bild,
laden_nr: "1"
});
//close my imageeditor
$("div#bildeditor").hide();
jcrop_api.destroy();
$("#cropbox").attr("src", "");
$("#preview").attr("src", "");
//If there is a new avatar, display it!!! -> and here only the uncropped is displayed
if(bild != "") {
$("img#logo").attr("src", bild);
bild = "";
}
});
I just don't know how the site is able to display the uncropped avatar, because it isnt there any more. it was replaced by the cropped one.
Thank you very much!
Benjamin
the problem is that your avatar pic got cached, so try to add an random parameter with the image name
on load var i=1;
On avatar change i++;
and set the img src ="imgpath?random="+i