How do I preview a raw base64 string without decoding and get a preview on my website? (there are tools for images, pdf but I don't have anything for office).
Put it in an iframe and for src, pass in document url either from Google docs or Office 360
<iframe src=INSERT_DOCUMENT_URL frameborder="0">
</iframe>
Related
I am currently working on a web extension that goes through all the images in the current webpage and blurs them. I have created a backend API that accepts a base64 encoded string of an image and returns the encoded string for the blurred image. My current issue is that I can't find a way to access all the images on the current webpage and get their base64 encoded string through javascript. How can I do this?
The intended architecture of the extension is as follows: the javascript file reads all the images on the webpage and encodes them into a base64 string, which is passed to the backend API. The API then blurs the image and returns a base64 encoded string of the blurred image. The javascript then decodes the string and replaces the original image with the blurred image.
Any help would be greatly appreciated.
I have tried going through all the image tags in the html of the webpage and fetching their urls, however this does not allow me to get the base64 encoding of the image(s). I would like to write a function that takes in the url to an image and returns the base64 encoding.
Refering to my other question: Why does pdf document download instead of showing in a embed/iframe?
When i embed a pdf document like the below examples, it downloads the documents instead of showing it embedded in the website.
<embed id="showPdfDocument" src="http://example.com:8080/client/attachment/filename.pdf" type="application/pdf" width="400" height="400">
or
<iframe id="showPdfDocument" src="http://example.com:8080/client/attachment/filename.pdf" style="width:400px;height:400px;"></iframe>
My assumptions:
I guess i have to change the HTTP-Header of the pdf document?
I also guess that the problem is with the field "Content-Disposition: attachment", as shown in the screenshot below
My question:
How can i change the HTTP-Header of the pdf document, using html/javascript only? (Greasemonkey for example)
Screenshot of the HTTP-Header of the pdf document:
("Chrome Dev-Tools(F12)" -> Network Tab, select the pdf document and check the response headers)
The content-disposition header triggers the save dialog. If you want to avoid it without server-side changes, try loading it via XHR and encode it as "data:" link.
In IndexedDB we have hdr images in the format of a Uint8Array. I retrieve these but need to display them in an image tag.
I have tried converting to base64 and setting image src to this with no luck.
`data:image/hdr;base64,${imageData}`
It is likely that the browser does not recognize the MIME type image/hdr. Your src prefix should be data:image/png;base64,${imageData}, see this post: How to display Base64 images in HTML?
I am scraping image src, title, price etc from website but it gives base64 string in place of image src. When i'm appending all these scraped data to uri, it shows error long uri. How to slow this problem?
If you're getting a base64 string as the img src, it sounds as though the image is encoded inline.
data: URIs are a very useful way to embed small items of data into a
URL—rather than link to an external resource, the URL contains the
actual encoded data.
An HTML fragment embedding a picture of small red dot:
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUA
AAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO
9TXL0Y4OHwAAAABJRU5ErkJggg==" alt="Red dot" />
In the example above, if you were to base64 decode the string (minus the data:image/png,base64, part), you would get the data of a PNG image which you could write to disk as a file.
http://dopiaza.org/tools/datauri/examples/index.php
https://en.wikipedia.org/wiki/Data_URI_scheme
Iam trying to embed a client-side generated PDF (from jsPDF) as base64-encoded String in IE+8 with no success for hours.
I tried object and embed-tags as well as iframe.
Its not working at all :(
This is my example "PDF" which works in chrome and firefox:
<object type="application/pdf" style="width:100%;height:400px;" data="data:application/pdf;base64,JVBERi0xLjMKMyAwIG9iago8PC9UeXBlIC9QYWdlCi9QYXJlbnQgMSAwIFIKL1Jlc291cmNlcyAyIDAgUgovQ29udGVudHMgNCAwIFI+PgplbmRvYmoKNCAwIG9iago8PC9MZW5ndGggNzA+PgpzdHJlYW0KMC41NyB3CjAgRwpCVAovRjEgMTYgVGYKMTYgVEwKMCBnCjU2LjY5IDc4NS4yMCBUZAooSGVsbG8gd29ybGQuKSBUagpFVAplbmRzdHJlYW0KZW5kb2JqCjEgMCBvYmoKPDwvVHlwZSAvUGFnZXMKL0tpZHMgWzMgMCBSIF0KL0NvdW50IDEKL01lZGlhQm94IFswIDAgNTk1LjI4IDg0MS44OV0KPj4KZW5kb2JqCjUgMCBvYmoKPDwvQmFzZUZvbnQvSGVsdmV0aWNhL1R5cGUvRm9udAovRW5jb2RpbmcvU3RhbmRhcmRFbmNvZGluZwovU3VidHlwZS9UeXBlMT4+CmVuZG9iago2IDAgb2JqCjw8L0Jhc2VGb250L0hlbHZldGljYS1Cb2xkL1R5cGUvRm9udAovRW5jb2RpbmcvU3RhbmRhcmRFbmNvZGluZwovU3VidHlwZS9UeXBlMT4+CmVuZG9iago3IDAgb2JqCjw8L0Jhc2VGb250L0hlbHZldGljYS1PYmxpcXVlL1R5cGUvRm9udAovRW5jb2RpbmcvU3RhbmRhcmRFbmNvZGluZwovU3VidHlwZS9UeXBlMT4+CmVuZG9iago4IDAgb2JqCjw8L0Jhc2VGb250L0hlbHZldGljYS1Cb2xkT2JsaXF1ZS9UeXBlL0ZvbnQKL0VuY29kaW5nL1N0YW5kYXJkRW5jb2RpbmcKL1N1YnR5cGUvVHlwZTE+PgplbmRvYmoKOSAwIG9iago8PC9CYXNlRm9udC9Db3VyaWVyL1R5cGUvRm9udAovRW5jb2RpbmcvU3RhbmRhcmRFbmNvZGluZwovU3VidHlwZS9UeXBlMT4+CmVuZG9iagoxMCAwIG9iago8PC9CYXNlRm9udC9Db3VyaWVyLUJvbGQvVHlwZS9Gb250Ci9FbmNvZGluZy9TdGFuZGFyZEVuY29kaW5nCi9TdWJ0eXBlL1R5cGUxPj4KZW5kb2JqCjExIDAgb2JqCjw8L0Jhc2VGb250L0NvdXJpZXItT2JsaXF1ZS9UeXBlL0ZvbnQKL0VuY29kaW5nL1N0YW5kYXJkRW5jb2RpbmcKL1N1YnR5cGUvVHlwZTE+PgplbmRvYmoKMTIgMCBvYmoKPDwvQmFzZUZvbnQvQ291cmllci1Cb2xkT2JsaXF1ZS9UeXBlL0ZvbnQKL0VuY29kaW5nL1N0YW5kYXJkRW5jb2RpbmcKL1N1YnR5cGUvVHlwZTE+PgplbmRvYmoKMTMgMCBvYmoKPDwvQmFzZUZvbnQvVGltZXMtUm9tYW4vVHlwZS9Gb250Ci9FbmNvZGluZy9TdGFuZGFyZEVuY29kaW5nCi9TdWJ0eXBlL1R5cGUxPj4KZW5kb2JqCjE0IDAgb2JqCjw8L0Jhc2VGb250L1RpbWVzLUJvbGQvVHlwZS9Gb250Ci9FbmNvZGluZy9TdGFuZGFyZEVuY29kaW5nCi9TdWJ0eXBlL1R5cGUxPj4KZW5kb2JqCjE1IDAgb2JqCjw8L0Jhc2VGb250L1RpbWVzLUl0YWxpYy9UeXBlL0ZvbnQKL0VuY29kaW5nL1N0YW5kYXJkRW5jb2RpbmcKL1N1YnR5cGUvVHlwZTE+PgplbmRvYmoKMTYgMCBvYmoKPDwvQmFzZUZvbnQvVGltZXMtQm9sZEl0YWxpYy9UeXBlL0ZvbnQKL0VuY29kaW5nL1N0YW5kYXJkRW5jb2RpbmcKL1N1YnR5cGUvVHlwZTE+PgplbmRvYmoKMiAwIG9iago8PAovUHJvY1NldCBbL1BERiAvVGV4dCAvSW1hZ2VCIC9JbWFnZUMgL0ltYWdlSV0KL0ZvbnQgPDwKL0YxIDUgMCBSCi9GMiA2IDAgUgovRjMgNyAwIFIKL0Y0IDggMCBSCi9GNSA5IDAgUgovRjYgMTAgMCBSCi9GNyAxMSAwIFIKL0Y4IDEyIDAgUgovRjkgMTMgMCBSCi9GMTAgMTQgMCBSCi9GMTEgMTUgMCBSCi9GMTIgMTYgMCBSCj4+Ci9YT2JqZWN0IDw8Cj4+Cj4+CmVuZG9iagoxNyAwIG9iago8PAovUHJvZHVjZXIgKGpzUERGIDAuOS4wcmMyKQovQ3JlYXRpb25EYXRlIChEOjIwMTMwNzAzMTAwODM1KQo+PgplbmRvYmoKMTggMCBvYmoKPDwKL1R5cGUgL0NhdGFsb2cKL1BhZ2VzIDEgMCBSCi9PcGVuQWN0aW9uIFszIDAgUiAvRml0SCBudWxsXQovUGFnZUxheW91dCAvT25lQ29sdW1uCj4+CmVuZG9iagp4cmVmCjAgMTkKMDAwMDAwMDAwMCA2NTUzNSBmIAowMDAwMDAwMjA1IDAwMDAwIG4gCjAwMDAwMDE0NDYgMDAwMDAgbiAKMDAwMDAwMDAwOSAwMDAwMCBuIAowMDAwMDAwMDg3IDAwMDAwIG4gCjAwMDAwMDAyOTIgMDAwMDAgbiAKMDAwMDAwMDM4MyAwMDAwMCBuIAowMDAwMDAwNDc5IDAwMDAwIG4gCjAwMDAwMDA1NzggMDAwMDAgbiAKMDAwMDAwMDY4MSAwMDAwMCBuIAowMDAwMDAwNzcwIDAwMDAwIG4gCjAwMDAwMDA4NjUgMDAwMDAgbiAKMDAwMDAwMDk2MyAwMDAwMCBuIAowMDAwMDAxMDY1IDAwMDAwIG4gCjAwMDAwMDExNTkgMDAwMDAgbiAKMDAwMDAwMTI1MiAwMDAwMCBuIAowMDAwMDAxMzQ3IDAwMDAwIG4gCjAwMDAwMDE2NzAgMDAwMDAgbiAKMDAwMDAwMTc1MiAwMDAwMCBuIAp0cmFpbGVyCjw8Ci9TaXplIDE5Ci9Sb290IDE4IDAgUgovSW5mbyAxNyAwIFIKPj4Kc3RhcnR4cmVmCjE4NTYKJSVFT0Y=" >
<p>It appears you don't have a PDF plugin for this browser. No biggie... you can click here to download the PDF file.</p>
</object>
Thanks in Advance for any hint!
IE8 only supports base64 strings for images and the object tag(images only):
http://en.wikipedia.org/wiki/Data_URI_scheme#Web_browser_support