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');
Related
I want to get the image url which is inserted when create a question into the classroom form.
Below is the code through we get the title , choices if available but i am not able to get the image url which is insert under the question title.
function getCourse() {
var form = FormApp.openById(id);
var formResponses = form.getItems();
var type=formResponses[0].getType();
var title = formResponses[0].getTitle();
var image =formResponses[0].getImage();//no such method Logger.log(image);
}
That image is not available through the Forms Service, it's added through the /viewresponse source code which is generated some way by Google. You could get it by using the URL Fetch Service (UrlFetchApp).
Related
How can I scrape text and images from a random web page?
(javascript / google scripts) How to get the title of a page encoded with iso-8859-1 so that the title will display correctly in my utf-8 website?
var blob = questionType.getImage();
var b64 = blob.getContentType() + ';base64,'+ Utilities.base64Encode(blob.getBytes());
var html = "data:" + b64 ;
I am using Google Apps Script to call an external API to post both text and an image to a contact in an external system. I have posted the text fine, many times, no problems. I have not worked with sending or even using images in Apps Script before, so I am unsure of how to send the image as a file. I've done quite a bit of research on Stack Overflow and elsewhere, but have not found the answer to this yet.
The API documentation for the external system says that it needs the following:
contactId - Type: String
Message:
text - Type: String... Description: Message text (Media or Text is required).
upload - Type: File... Description: Message image (Media or Text is required). Media must be smaller than 1.5mb. Use a jpg, jpeg, png, or gif.
The "upload", type "File" (a jpg picture/image) is what I cannot figure out how to grab, format, and send. I currently have the image in Google Drive, have shared it for anyone to access via its URL, and it is well under 1.5MB.
Here is most of my test code (marked as JS, but really Google Apps Script), with the identifying info changed, with several different ways I have tried it. At this point, I am just banging my head against the wall! Any help is greatly appreciated!!! Thank you!
function TestAPI() {
var apiKey2 = '9xxxxx-xxxx2-xxxxx-bxxx-3xxxxxxa'; //API Key for the external system
var url4 = 'https://www.externalsystem.com/api/v1/[contactID]/send';
var pic = DriveApp.getFileById("1yyyyyy_Nyyyyxxxxxx-_xxxxxxx_xyyyy_"); // I Tried this
// var pic = driveService.files().get('1yyyyyy_Nyyyyxxxxxx-_xxxxxxx_xyyyy_'); //And tried this
// var pic = DriveApp.getFileByID('1yyyyyy_Nyyyyxxxxxx-_xxxxxxx_xyyyy_').getAs(Family.JPG); //And this
// var pic = { "image" : { "source": {"imageUri": "https://drive.google.com/file/d/1yyyyyy_Nyyyyxxxxxx-_xxxxxxx_xyyyy_" } } }; //And this
// var pic = { file : DriveApp.getFileById("1yyyyyy_Nyyyyxxxxxx-_xxxxxxx_xyyyy_") }; //And this
var formData = {
'contactID': '[contactID]',
'text': "Text here to send to external system through API", // This works fine every time!
'upload': pic // Tried this
// 'upload': DriveApp.getFileByID("1yyyyyy_Nyyyyxxxxxx-_xxxxxxx_xyyyy_").getBlob() // And tried this
// 'upload': { "image" : { "source": {"imageUri": "https://drive.google.com/file/d/1yyyyyy_Nyyyyxxxxxx-_xxxxxxx_xyyyy_" } } } // And this
};
var options4 = {
"headers":{"x-api-key":apiKey2},
'method' : 'post',
'payload': formData
};
var response4 = UrlFetchApp.fetch(url4, options4);
}
Once again, everything is working fine (text, etc.) except for the image (the "upload") not coming through. I am pretty sure it is because I don't know how to "package" the image from Google Drive through the UrlFetchApp call to the API.
The official document says that Message text (Media or Text is required) and Message image (Media or Text is required). From this, please try to test as following modification.
Modified request body:
var formData = {
upload: DriveApp.getFileById("###").getBlob()
};
I thought that from the official document, when both 'upload' and 'text' are used, only 'text' might be used.
And also, from your tested result, it was found that the request body is required to be sent as the form data.
Reference:
Contacts - Send Message To Contact
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 !
I am working on a project which generates an image on the HTML Canvas, and then offers to download the image as a PNG.
The program has to be clientside (javascript).
I can convert the canvas to image by using
var canvas=document.getElementById('canvas');
var img = canvas.toDataURL("image/png;base64");
And the code that is supposed to download the picture is:
var container = document.querySelector('#container2');
//container2 is a div in HTML
var output = container.querySelector('output');
//output is inside container2
window.URL = window.webkitURL || window.URL;
var prevLink = output.querySelector('a');
if (prevLink) {
window.URL.revokeObjectURL(prevLink.href);
output.innerHTML = '';}
//removes the download link if already there
var bb = new Blob([img], {data: "image/png;base64"});
//creates new blob from the img variable
var a = document.createElement('a');
a.download = 'test' + '.png';
//file name
a.href = window.URL.createObjectURL(bb);
//create URL from blob
a.textContent = 'Click here for download';
a.dataset.downloadurl = ["image/png;base64", a.download, a.href].join(':');
output.appendChild(a);
This works perfectly if the blobvariable is a string of text instead of the "img" variable. Instead of an image, I get af corrupted .png file which, opened in notepad gives data:image/png;base64,iVBORw0KGgoAAAANSUhEU...(long string of base64 letters), which is the correct string, but apparantly not good for PNG images. But if I write
document.write('<img src="'+img+'"/>');
The image is opened correctly in a new tab.
How can i make the downloaded image uncorrupted?
(it seems impossible to download the data generated by Canvas2image )
looks like you need to convert the base64 string back to a blob. here's how:
Base64 encoding and decoding in client-side Javascript
The document.write might work on some browsers, if they are able to handle base64 natively.
The other problem is that JavaScript usually works with string, but to download the file you need something like a ByteArray. Here's an implementation, I've found: https://github.com/danguer/blog-examples/blob/master/js/base64-binary.js
That's how I got it working then:
var ab = Base64Binary.decodeArrayBuffer(img.substring(22));
var bb = new Blob([ab]);
var a = document.createElement('a');
a.download = 'test' + '.png';
a.href = window.URL.createObjectURL(bb);
a.textContent = 'Click here for download';
output.appendChild(a);
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. ;)