I have dynamically created a html canvas image. I want to post it to facebook user's wall via javascript sdk. What I am doing is
I tried to convert canvas into a javascript image object & provide finalimage in fb.ui method
var temp = canvas.toDataURL("image/png");
var finalimage=temp.replace(/^data:image\/(png|jpg);base64,/, "");
FB.ui(
{
method: 'feed',
name: 'The Facebook SDK for Javascript',
caption: 'Bringing Facebook to the desktop and mobile web',
description: (
'A small JavaScript library that allows you to harness ' +
'the power of Facebook, bringing the user\'s identity, ' +
'social graph and distribution power to your site.'
),
link: 'https://developers.facebook.com/docs/reference/javascript/',
picture: finalimage
},
function(response) {
if (response && response.post_id) {
alert('Post was published.');
} else {
alert('Post was not published.');
}
}
);
But I am getting an error
Error Message: picture URL is not properly formatted
Can anyone please help how do I do that??
You need to save the image at your server for doing that, your image must be outside Facebook, because FB.ui "FEED" does not accept base64 encoded data as picture, its impossible .
Its very large data, and if you try to short the base64 code into a url shorteer, you will find difficulties too .
What you can do, and what i am doing, is use an PHP server to get the Base64 data, and convert it into image, like a dynamic image, ok? But a memory problem will be created .
Another option is (really) posting the canvas as an image on user profile, so you will need use FB.api for that, instead of FB.ui, feed dialog is used for sharing links, and, canvas doesnt have Title, Description, proprieties .
After posting the image, you will get an response, with ID, that is post ID, and this cannot be used on Feed as Link or Image proprietity, but you can use Share Dialog, if you want to share the post .
That is piece of cake, i done that, and recommend you do the same .
Posting Canvas as images usin API on Facebook Platform is great, you can do that using JavaScript SDK .
Related
I used to call Google Translate TTS to download an audio file using this url:
http://translate.google.com/translate_tts?tl=en&q=Hello+world!
However Google changed the way that works and therefore I can no longer download the audio files.
I've signed up for a free trial for Google Translate API V2, but can't find how to get the TTS audio files.
Any idea?
You can use that link without captcha..
https://translate.google.com/translate_tts?ie=UTF-8&tl=tr-TR&client=tw-ob&q=Batsın+bu+dünya+bitsin+bu+rüya
I stumbled across this thread and wanted to give my take on it, with reference to #Alexandre Andrade, mainly because he didn't submit any code.
I did this in a react app, but the same procedure should works for a vanilla web project.
I did add the meta tag to my head public/index.html,
<head>
...
<meta name="referrer" content="no-referrer">
...
</head>
Then added the audio tag in my component:
Javascript:
const playTTS = (text, lang) => {
// Get the audio element
const audioEl = document.getElementById('tts-audio');
const url= `https://translate.google.com/translate_tts?ie=UTF-8&tl=${lang}&client=tw-ob&q=${text}`;
// add the sound to the audio element
audioEl.src = url;
//For auto playing the sound
audioEl.play();
};
html
...
<audio controls id="tts-audio"/>
...
Then it's just a matter of hooking the function up to some of your life cycle methods. Since I wrote my react code in react hooks, I added the function call in one of my hooks to get it initialized when the component was loaded. (this would be in the componentDidMount() function otherwise).
Hope this helps anyone out!
try this link for English:
https://translate.google.com/translate_tts?ie=UTF-8&client=tw-ob&tl=en&q=Hello+World
For Chinese (Puthonghua)
https://translate.google.com/translate_tts?ie=UTF-8&client=tw-ob&tl=zh-CN&q=世界+你好
Text-to-speech was always an 'unofficial' API which is now captcha-protected to prevent abuse. It was never advertised as part of the Translate API, and currently there is no TTS functionality in the Translate V2 API, paid or otherwise.
There is some more background on the following groups thread which had been ongoing for some time.
Here's to those who have desperately been trying to play Google TTS as an audio in HTML: let me save you a couple of hours of time and tell you how to do it.
Let's say we have this link:
https://translate.google.com/translate_tts?ie=UTF-8&client=tw-ob&tl=en&q=I+love+coffee
If you try to play this audio given the link and using <audio>, <iframe>, using third-party libraries or playing it with Javascript...
var audio = new Audio('https://translate.google.com/translate_tts...');
audio.play();
...then you'll soon find out that none of the aforementioned ways work as Error 404 is being thrown.
Solution
Apparently, the only possible way to play this TTS generic audio is to utilise <embed> tag wrapped into a custom <iframe> and giving the link a unique version number (it is important, as caching by browsers prevents the audio from playing for some reason).
Here is the solution for our example: (assuming you have an iframe#ttsiframe)
function playTTS(lang,sentence) {
//get the iframe
var iFrame = document.getElementById('ttsiframe');
//remove its sandbox property
iFrame.removeAttribute('sandbox');
//this is your reference variable for the iframe body and head tag
var iFrameBody;
//get the body
if (iFrame.contentDocument) { // FF
iFrameBody = iFrame.contentDocument.getElementsByTagName('body')[0];
iFrameHead = iFrame.contentDocument.getElementsByTagName('head')[0];
}
else if (iFrame.contentWindow) { // IE
iFrameBody = iFrame.contentWindow.document.getElementsByTagName('body')[0];
iFrameHead = iFrame.contentWindow.document.getElementsByTagName('head')[0];
}
else {
iFrameBody = iFrame.contentDocument.body;
iFrameHead = iFrame.contentDocument.head;
}
//generate link to Google Translate TTS using arguments (pay attention to random version number at the end)
var link = 'https://translate.google.com/translate_tts?ie=UTF-8&client=tw-ob&tl=' + lang + '&q=' + sentence.replace(/ /g,'+').replace(/[.]/g,'') + '&rd=' + getRandomInt(0,50000000);
//add embed element with our link
iFrameBody.innerHTML = '<embed src="' + link + '" id="TTS">';
//isolate iframe
iFrame.setAttribute('sandbox','');
}
you can simply use the link:
Text to Speech
I do not know at all how to get the avatar of the profile of a twitter account: /
Even looking at the DOC here:
https://dev.twitter.com/rest/reference/post/account/update_profile_image
If a kind person could help me.
Here is my code without the class
if(isset($_GET['name']))
{
$name= htmlentities($_GET['name']);
}
$cache = 'cache/tweets.tmp';
if(time() - filemtime($cache) > 60){
require 'class/twitteroauth.php';
$connection = new TwitterOAuth('***','****', '**-**', '****');
$pics = $connection->post('account/update_profile_image','//screen_name => HERE...$name....');
//var_dump($pics);
file_put_contents($cache, serialize($pics));
}else{
echo 'Cache utilisé';
$pics = unserialize(file_get_contents($cache));
}
You're looking at the documentation for updating a Twitter user's profile image. From your question, I take it that you simply want to get this image. Remember a POST request is meant for creating new content, not simply GETting it.
Have a look at this:
https://dev.twitter.com/rest/reference/get/users/show
The users/show method provides various information about the user, including a link to the image with the key profile_image_url.
This answer should provide more detail to help you figure it out.
My app has a bunch of images stored as blobs in the local SQLite Database. These images are taken with the device camera. I'm using Titanium Alloy, so the image was saved using the .save() method an Alloy Model.
I've started using the TiSocial module that can post an image to Twitter or Facebook. One its parameters is image and it has to be:
a local/remote path to an image you want to share
The image I want to use is set as the image property on an ImageView. The ImageView image is set like this: $.theImageView.image = args.the_image;, where args.image is the image blob, taken from the database collection.
I tried to take this image blob and set it as the image on the TiSocial module initialisation method:
Social.activityView({
text: "Hello world! Take a look at this: " + args.name,
image: args.the_image,
removeIcons:"airdrop,print,copy,contact,camera"
});
Alternatively I tried to take use the image saved on the ImageView, like this:
Social.activityView({
text: "Hello world! Take a look at this: " + args.name,
image: $.theImageView.image,
removeIcons:"airdrop,print,copy,contact,camera"
});
However neither of these worked, and no image appears in the Tweet or Facebook message dialogs. And no error appears in the console.
On the other hand, if I set the image property to an image saved in the assets folder, then it works just fine. For example:
`image: "an_image.jpg"`
I tried a solution mentioned in the comments below, which was to save the image to Ti.FileSystem, and then read the image from there. However, this still did not work.
You could try sharing remote images this way...
var largeImg = Ti.UI.createImageView({
width : Ti.UI.SIZE,
height : 'auto',
image :'http://www.google.com/doodle4google/images/splashes/featured.png'
});
var imageGoogle =largeImg.toBlob();
// share image
Social.activityView({
status : "Hello world! Take a look at this: ",
image : imageGoogle,
removeIcons:"airdrop,print,copy,contact,camera"
});
then i would suggest to add one field called img_path in your database table because you can not get path from blob so when you store any blob to alloy model then also add its path to that model so you can retrieve it later and can share.
Hope you understand.
I had some luck by saving the file to the Ti.Filesystem, and then later retrieving it and using the .getNativePath() method:
function getImage() {
var f = Ti.Filesystem.getFile(Ti.Filesystem.applicationDataDirectory, args.alloy_id + '.jpg');
return f.read();
}
var theImage = getImage();
Social.activityView({
text: "Just tried this beer called " + args.name,
image: theImage.getNativePath(),
removeIcons:"airdrop,print,copy,contact,camera"
});
I'm trying to use tiles templates(a tile which shows an image and switches to show text)
http://msdn.microsoft.com/en-us/library/windows/apps/hh761491.aspx#TileSquarePeekImageAndText04
The question is: where do I put this XML and how can I call it in XAML?
You don't call it in XAML, you provide it to a TileUpdater instance, as you can see from the documentation for TileUpdateManager below. This simplistic scenario handles a local notification (but there are also scheduled, periodic, and push notifications you can leverage).
Take a look at the App tiles and badges and Push and periodic notifications samples for guidance.
function sendTileTextNotification() {
var Notifications = Windows.UI.Notifications;
// Get an XML DOM version of a specific template by using getTemplateContent.
var tileXml = Notifications.TileUpdateManager.getTemplateContent(Notifications.TileTemplateType.tileWideText03);
// You will need to look at the template documentation to know how many text fields a particular template has.
// Get the text attribute for this template and fill it in.
var tileAttributes = tileXml.getElementsByTagName("text");
tileAttributes[0].appendChild(tileXml.createTextNode("Hello World!"));
// Create the notification from the XML.
var tileNotification = new Notifications.TileNotification(tileXml);
// Send the notification to the calling app's tile.
Notifications.TileUpdateManager.createTileUpdaterForApplication().update(tileNotification);
}
I am trying to make a flash banner in CS4 with AS3.
In this banner I have to embed youtube videos.
My problem is.. after the video loaded I cant have/see usual controls (fullscreen, pause, stop, etc) on the video.. and the video has the autoplay by default.
I am using this code:
Security.allowDomain("*");
Security.allowDomain("www.youtube.com");
Security.allowDomain("youtube.com");
Security.allowDomain("s.ytimg.com");
Security.allowDomain("i.ytimg.com");
var my_player1:Object;
var my_loader1:Loader = new Loader();
my_loader1.load(new URLRequest("http://www.youtube.com/apiplayer?version=3"));
my_loader1.contentLoaderInfo.addEventListener(Event.INIT, onLoaderInit);
function onLoaderInit(e:Event):void{
addChild(my_loader1);
my_player1 = my_loader1.content;
my_player1.addEventListener("onReady", onPlayerReady);
}
function onPlayerReady(e:Event):void{
my_player1.setSize(200,100);
/////////////////////////////////
//this example is with parameter//
//my_player1.loadVideoByUrl("http://www.youtube.com/v/ID-YOUTUBE?autohide=1&autoplay=0&fs=1&rel=0",0);
//////////////////////////////////
// this one is only the video id//
my_player1.loadVideoByUrl("http://www.youtube.com/v/ID-YOUTUBE",0);
}
I was trying to pass the parameter in the url to try but seems to be is not working.
I was checking too the google API for AS3 (http://code.google.com/apis/youtube/flash_api_reference.html) but honestly I dont find the way to implement that I need.
Whats is the way to see this controls in the video??
Thank you :)
I was trying different thing and I found a partial solution that i want to share with:
Security.allowDomain("www.youtube.com");
Security.allowDomain("youtube.com");
Security.allowDomain("s.ytimg.com");
Security.allowDomain("i.ytimg.com");
Security.allowDomain("s.youtube.com");
var my_player1:Object;
var my_loader1:Loader = new Loader();
//before I used that:
//my_loader1.load(new URLRequest("http://www.youtube.com/apiplayer?version=3"));
//Now is use this:
my_loader1.load(new URLRequest("http://www.youtube.com/v/ID_VIDEO?version=3));
my_loader1.contentLoaderInfo.addEventListener(Event.INIT, onLoaderInit);
function onLoaderInit(e:Event):void{
addChild(my_loader1);
my_player1 = my_loader1.content;
my_player1.addEventListener("onReady", onPlayerReady);
}
function onPlayerReady(e:Event):void{
my_player1.setSize(200,100);
my_player1.loadVideoByUrl("http://www.youtube.com/v/ID_VIDEO",0);
}
Basically Instead of use the "Loading the chromeless player" I use the "Loading the embedded player"
My problem now is How I can modify for example the size of the controls bar.. because is taking 35px height and I want to reduce it
Thank