I'm trying to download an image with Angularjs and then save it to mongodb and display it in the future.
First I just try to download image binary and display it and it doesn't work.
$scope.downloadProfileImage = function()
{
//Getting the user that logged in through facebook
$authentication.getUserInfoWithoutLocation(function(respone)
{
//getting the url for the profile picture from facebook
FB.api('/'+respone.id+'/picture',function(respone)
{
//the response hold the url of the profile picutre..trying to download it
$http.get(respone.data.url).success(function(success)
{
//success is the image binary,encoding it to base64 and bound to it
$scope.img = Base64.encode(success)
})
})
})
}
in the html I just have <img ng-src="{{img}}"/>.
this doesn't work.. why?
even if I remove the base64 encoding and bind $scope.img to success it still does now show the image..
please help me.
Thanks!.
In order to display an image encoded in base64 it has to be in following form:
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIA..." />
So you probably have to add data:image/png;base64, in front of your $scope.img. Of course it depends what your image format is (png, jpeg, gif).
Can you just use the URL in ngSrc?
FB.api('/'+respone.id+'/picture',function(respone)
{
$scope.imgSrc = respone.data.url;
});
View
<img ng-src="{{ imgSrc }}" />
First of all check whether the image is successfully encoded into base64 or not. I think so. Now before displaying it just add this "data:image/png;base64," to the base64 string.
Here is the sample
In angularjs file
$scope.picValue="data:image/png;base64,"+base64String;
In html page
<img ng-src="{{picValue}}" />
Related
I am trying generate PDF from simple code, but no show image.
Help me please.
code
pdf.create("Hello <img src='j4.jpg' />").toFile('./pdf/cotizacion.pdf', function (err) {
if (err) {
console.log(err);
} else {
console.log("File created successfully ");
}
});
Result:
Thanks!
Can you something like this, since its not reading your image, its taking it as a string.
<img src={{IMG_URL}} style="width:100%"/>
Or you can put base64 of image like:
<img src="data:image/jpeg;base64, {{BASE64_DATA_OF_IMG}}" style="width:100%"/>
This will read your image in pdf.
After some testing I noticed the images are shown in pdf if they are served somewhere, every attempt with file://path_to_file or relative path failed.
Instead I serve the image on a server http://localhost:3000/images/logo.svg
and I use <img src="http://localhost:3000/images/logo.svg" style="width:100%"/>
I have base64 string of the pdf file(Gmail PDF attachments), i am getting the base64 encoded from the server directly,now i need to convert this base64 to image to display the pdf in next tab of the browser.
I'm using the below code,
var pdfAsDataUri = "data:image/png;base64,"+file;
window.open(pdfAsDataUri);
* the new tab is open and is not displaying the pdf
Can you sugest me, how to convert pdf base64 encoded string to image[i'm getting base64 encoded string directly from server]
Note: Please find the below image, if i click on that green marked icon, the pdf should open in new tab.enter image description here
You can try making an Image object. Then in the src put the base64.
var myImage = new Image();
myImage.src="data:image/png;base64,"+file;
<embed src="data:application/pdf;base64,BASE_64_STRING" type="application/pdf" width="100%" height="600px" />
why you dont use iframe
<iframe id="framTest" height="100%" width="100%" />
$('#framTest').prop("src", your base64 string);
Let's say I have a url of an image link location that doesn't have an extension (.jpg) but when I go to the url it shows me that the corresponding link is an image? How would echo this url in php?
For example the recaptcha image from recaptcha.net it encodes the string with a public key. When I make an html file and use it outputs the image on the page, but when I try to echo the same attributes in php it just outputs a blank image and doesn't display the google captcha image. I am trying to create a forum login page for vbulletin but in this case it should use the captcha implementation since I don't want to sign up for crawling with bots on the my page by google. Can anyone tell me how I can go about doing this?
So basically after the request is made to obtain the key from the image which is assigned to $key the echo request doesn't output the image:
$key = the data inside the GET parameter 'c' everytime the captcha is requested.
echo "<img src='www.google.com/recaptcha/api/image?c=".$key."'/>";
You can use a image regardless of the file extension. It's the MIME type that matters.
The reason why the following won't work is because of no specified protocol.
<img src="goo.gl/XWyGjO"/>
Working:
<img src="//goo.gl/XWyGjO"/>
<img src="http://goo.gl/XWyGjO"/>
<img src="https://goo.gl/XWyGjO"/>
// = inherit the current protocol.
I have developped a brower plugin that Acquire a picture from a Scanner or a Camera and save the picture in the file system of the user.
The output is the filepath to the picture.
I want to preview the picture in the Broswer, using javascript...
How can I get the picture without user interaction ?
( part of a Web App only compatible with Google Chrome)
If you have the filepath returned by your browser plugin and you have identified the event when you have to display the image then you can call ShowImage(filepath) function on that event.
<script type="text/javascript">
function ShowImage(filePath) {
$("#preview").append("<img alt='img' src='" + filePath + "'");
}
</script>
Your HTML should contain the div:
<div id="preview"></div>
If you have the contents of the image already you can load them in directly, by base64 encoding it and providing an URL as follows:
<img src="data:image/png;base64,iVBORw0KGgoAAAANS..." />
I am working on a site where there is a feature for users to be able to sign directly on the webpage using a canvas free form pen tool. When users click the 'apply signature' button the signature that the user drew is converted into an image and saved on the page as an <img src=""> (as you can see in the code below). Up until this point everything works great.
The problem is, When the user submits the form, I am trying to get the newly created canvas image to submit with it as a post variable and render on the process.php page as the signature that was signed. It appears that image (toDataURL()) gets passed as a post variable, but for some reason it does not render on the process.php page. It appears like the image source is not found.
I am new to javascript and I have been trying to fix this problem for days now, I would appreciate any help with fixing this. Many thanks in advance!
Markup
<div class="signature-field">
Sign:
<span class="sketch-container">
<canvas id="simple_sketch" width="350" height="100"></canvas>
</span>
Date: <input name="signature-date" type="text"><br/>
<div class="signature-buttons">
<span class="save-signature">Apply Signature | </span>
<span class="reset-canvas">| Reset Signature</span><br/>
</div>
</div>
<form method="post" action="process.php">
<input type="text" name="fname">
<input id="signature" name="signature" type="hidden">
<input type="submit">
</form>
JavaScript
$(function () {
var sktch = $('#simple_sketch').sketch();
var cleanCanvas = $('#simple_sketch')[0];
$('.save-signature').click(function () {
/* replace canvas with image */
var canvas = document.getElementById("simple_sketch");
var img = canvas.toDataURL("image/png");
$('#simple_sketch').replaceWith('<img src="' + img + '"/>');
$('.signature-buttons').replaceWith('');
document.getElementById("signature").value = $('.sketch-container').html();
});
});
I'm not quite sure what you're doing here, but if you want to post the image data through the hidden signature field, simply do this:
document.getElementById("signature").value = document.getElementById("simple_sketch").toDataURL("image/png");
As right now, it looks like you're posting the image data including <img> tags ("<img src="<DataUrl>"/>")
How about your server-side code, is the img param output empty? Are you sure the img data is being sent through the request? Try some packet sniffing tool like Fiddler or Wireshark and analyze the contents of the request (You can also take a quick look with Firebug).
Perhaps you could try some other approach to convert the img data:
https://developer.mozilla.org/en-US/docs/HTML/Canvas/Pixel_manipulation_with_canvas