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);
Related
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>
I have this code that displays a color converted image for a customer on the web page, the customer can then click a download button to download the image,
It works fine on a PC but if i try to download the image on a android phone i get the error "Can only download http or https urls"
im guessing its because the saved image has a path like "data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD//gA8Q1JFQVRPU"
how do i get this working? does it need to be converted or something?
here is my code:
imagejpeg($gd,NULL,100);
$outputBuffer = ob_get_clean();
$base64 = base64_encode($outputBuffer);
echo '<a id="downloadimage" style="text-decoration:none;" download>
<img id="image2" style="border:1px solid lightgrey;" width="300" height="400" src="data:image/jpeg;base64,'.$base64.'" />
<li style="padding-top:10px;textalign:center;display:block;border-radius:10px;background-color:royaleblue;height:30px;width:100px;background-color: lightgray;
padding-left: 30px;margin-left: 80px;">download</li></a>';
Well base64 encoded data represents the actual content of image in binary format and cannot be used with img tag. You need to either give the actual path where it is stored locally in the phone as in "../../file.jpg" or in the cloud as in "http://www.google.com/happy.png."
I'm trying to generate PDF in a div tag like this.
<div id="pdf">
<object width="400" height="500" type="application/pdf" data="pdftext.pdf" id="pdf_content"></object>
</div>
I am still unable to accomplish this due to my requirements.
request using GET values must not be used.
IFrame must not be used.
no physical file is generated. Only strings.
I tried rendering base64 pdf byte stream using HTML 5 object but still no luck.
<div id = 'pdfHere'>
<object src="data:application/pdf;base64,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Pj4KZW5kb2JqCjcgMCBvYmoKWzEgMCBSL1hZWiAwIDg1MiAwXQplbmRvYmoKMiAwIG9iago8PC9TdWJ0eXBlL1R5cGUxL1R5cGUvRm9udC9CYXNlRm9udC9IZWx2ZXRpY2EvRW5jb2RpbmcvV2luQW5zaUVuY29kaW5nPj4KZW5kb2JqCjMgMCBvYmoKPDwvU3VidHlwZS9UeXBlMS9UeXBlL0ZvbnQvQmFzZUZvbnQvSGVsdmV0aWNhLUJvbGQvRW5jb2RpbmcvV2luQW5zaUVuY29kaW5nPj4KZW5kb2JqCjQgMCBvYmoKPDwvU3VidHlwZS9UeXBlMS9UeXBlL0ZvbnQvQmFzZUZvbnQvSGVsdmV0aWNhLU9ibGlxdWUvRW5jb2RpbmcvV2luQW5zaUVuY29kaW5nPj4KZW5kb2JqCjYgMCBvYmoKPDwvS2lkc1sxIDAgUl0vVHlwZS9QYWdlcy9Db3VudCAxL0lUWFQoMi4xLjcpPj4KZW5kb2JqCjggMCBvYmoKPDwvTmFtZXNbKEpSX1BBR0VfQU5DSE9SXzBfMSkgNyAwIFJdPj4KZW5kb2JqCjkgMCBvYmoKPDwvRGVzdHMgOCAwIFI+PgplbmRvYmoKMTAgMCBvYmoKPDwvTmFtZXMgOSAwIFIvVHlwZS9DYXRhbG9nL1BhZ2VzIDYgMCBSL1ZpZXdlclByZWZlcmVuY2VzPDwvUHJpbnRTY2FsaW5nL0FwcERlZmF1bHQ+Pj4+CmVuZG9iagoxMSAwIG9iago8PC9Nb2REYXRlKEQ6MjAxNTA1MDQxOTU4NDMrMDgnMDAnKS9DcmVhdG9yKEphc3BlclJlcG9ydHMgTGlicmFyeSB2ZXJzaW9uIDUuNi4wKS9DcmVhdGlvbkRhdGUoRDoyMDE1MDUwNDE5NTg0MyswOCcwMCcpL1Byb2R1Y2VyKGlUZXh0IDIuMS43IGJ5IDFUM1hUKT4+CmVuZG9iagp4cmVmCjAgMTIKMDAwMDAwMDAwMCA2NTUzNSBmIAowMDAwMDAyNDU4IDAwMDAwIG4gCjAwMDAwMDI3NDUgMDAwMDAgbiAKMDAwMDAwMjgzMyAwMDAwMCBuIAowMDAwMDAyOTI2IDAwMDAwIG4gCjAwMDAwMDAwMTUgMDAwMDAgbiAKMDAwMDAwMzAyMiAwMDAwMCBuIAowMDAwMDAyNzEwIDAwMDAwIG4gCjAwMDAwMDMwODUgMDAwMDAgbiAKMDAwMDAwMzEzOSAwMDAwMCBuIAowMDAwMDAzMTcxIDAwMDAwIG4gCjAwMDAwMDMyNzUgMDAwMDAgbiAKdHJhaWxlcgo8PC9JbmZvIDExIDAgUi9JRCBbPDI3YmUwODczMzI5MGQzMTcwMDAzNzUzZmJmNDcwODJiPjw4ZjExZjkwNTJjMTJhZjgzNGM4OWFiOTFmZDU4OGRkYT5dL1Jvb3QgMTAgMCBSL1NpemUgMTI+PgpzdGFydHhyZWYKMzQ0MwolJUVPRgo" type="application/pdf" width="100%" class="internal">
<param name="view" value="fitH" />
</object>
</div>
I have tried using plugins like pdf.js or pdfObject but this plugins won't allow me to pass POST values to the url (as far as I know).
PHP accomplished my task by doing this.
I use header('Content-type: application/pdf') and rendered string like this %PDF-1.4 %âãÏÓ 5 0 obj <>stream xœÅ\ÛrÛ¶}÷Wàí¤3 but they wanted it inside a div tag (not iframe).
Is there any way javascript can render byte stream or plugins which I can post values to URL and render the return and put it inside a div or generate an HTML 5 pdf object?
tried to pass the php file name that genrates the pdf like <object width="400" height="500" type="application/pdf" data="pdfgenrator.php" id="pdf_content"></object>
And to pass data to pdfgenrator.php you have to do it before the whole page load else it will not work
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}}" />
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..." />