Is it possible in Javascript/JQuery to get the base64 image data from an image on the page?
For example is there a function like...
<img id="foo" src="https://mywebsite.com/bar.png">
<script>
var base64Data = $('#foo').base64();
</script>
Related
I want to show a PSD file that I uploaded to the input element as a photo in the canvas element. I tried an example for this but it didn't work. Where am I doing wrong?
in script.js
var PSD = require('psd');
// Load from URL
PSD.fromURL(e.target.result).then(function(psd) {
console.log("PSD UPLOADED");
console.log(psd);
document.getElementById("the-canvas").appendChild(psd.image.toPng());
}).catch((error)=> {console.log(error)})
in html.js
<input type="file">
<canvas id="the-canvas"></canvas>
my question is how to display the selected file image from the input file in img tag, I have described the code below.
<img src="" width="200" height="100">
<input type="file" name="logo" id="upload-logo" />
$('#upload-logo').on('change', function(){
let logo = $(this).val();
$('img').attr('src', logo);
});
but the result I got after changing the src attribute is: Not allowed to load local resource: file: /// C: /fakepath/Capture.PNG, and photos are not displayed
I do not want to use ajax
You must use the file reader to validate and allow preview of the uploaded image. the browser disallows the access to local system files for good reason and the file inputs place files in a temporary folder system that the browser is allowed to access.
Here is an example of how to use the File Reader Source
const reader = new FileReader();
reader.onload = function(e) {
// do something with the result
var file = reader.result || e.target.result;
}
reader.readAsDataURL(input.files[0]);
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);
I have a simple HTML page with a Button. Onclick it should show an image through an Ajax call.
It works fine in Postman Rest Client.
But in browser it is showing raw data instead of pic.
HTML
<html>
<button type="button" id="test" onclick="asset();"> Show Asset </button>
<div class="result"></div>
</html>
Ajax
$("#test").on("click", function asset() {
$.ajax({
type: 'GET',
url: 'https://url', //get an image
//url: 'https://url', //get audio file
beforeSend: function(xhr) {
xhr.setRequestHeader('Accept', 'image/png');
//xhr.setRequestHeader('Accept', 'audio/x-wav');
},
success: function(data) {
$(".result").html(data);
},
error: function(e) {
alert("error post" + JSON.stringify(e));
}
});
});
Sample Raw data -
�PNG IHDR�O^�fsRGB���gAMA���a pHYs���o�d�mIDATx^��{TUG����3���%c�N�8������N'��;Iw'�yu�_�Q�((�����(�E#T#��%B$$�ݝd�����I�$w�xn��3�[_�9ך�Zk��^��Wc
What should I do to get image?
Question 2.
How to display/play an audio/video in html page? As of now when I use another audio url...nothing gets disaplyed in browser.
---edit---
#Everyone thank you for your quick solutions.
Actually I also need to send an HTTP Header along with the URL.
Because the URL may give me an Image/Audio/Video file depending on the Request Header.
In this case how can I display Image/Audio/Video within Webpage?
If your url is just a link to image then no need to make an ajax call. Just add a img tag to your html and modify its src attribute value.
var url = "https://placehold.it/350x150"; // some url
$(function(){
$("#test").click(function(){
$("#imgId").attr("src",url);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<button type="button" id="test"> Show Asset </button>
<div class="result">
<img id="imgId" src="" />
</div>
</html>
You don't need to use ajax to load images, images are already loaded asynchronously. So just create an img element and add the src of the image. This works even when the page has been loaded.
$("#test").click(function() {
$(".result").append("<img src='img/src.png' />");
});
I think the data in success is a base64 encoded image. In that case you have to show it like:
success: function(data) {
document.getElementById('img').setAttribute( 'src', data );
}
Maybe image that is returned from api is base64 format. So you must convert that base64 data into image. Change your success callback like the following.
success: function(data) {
var img= new Image();
img.src = 'data:image/png;base64,'+ data;
$(".result").appendChild(img);
}
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}}" />