I am trying to implement a download button for Internet Explorer users that will let them download a png file being displayed on a page.
The image is provided as a Data URL and displays normally on the page.
However, when the image is downloaded on Internet Explorer using the following code, only the upper half of the image gets downloaded.
I know the problem does not come from dataURLtoBlob() because reading the blob as a Data Url returns exactly the same original data.
Can anyone help me understand what's going on here? Thanks a lot for the help.
downloadButton.onclick = function () {
if (window.navigator.msSaveOrOpenBlob) {
var filename = "image.png";
var data = $('#qrCode').attr("href");
var blob = dataURLtoBlob(data);
console.log(data);
let reader = new FileReader();
reader.readAsDataURL(blob);
reader.onload = function() {
console.log(reader.result);
};
window.navigator.msSaveBlob(blob, filename);
}
}
function dataURLtoBlob(dataUrl) {
var arr = dataUrl.split(',');
var mime = arr[0].match(/:(.*?);/)[1];
var byteString = atob(arr[1]);
var arrayBuffer = new ArrayBuffer(byteString.length);
var ia = new Uint8Array(arrayBuffer);
for (var i = 0; i < byteString.length; i++) {
ia[i] = byteString.charCodeAt(i);
}
return new Blob([ia], { type: mime });
}
I managed to find a workaround for this issue by using an intermediate canvas.
var ieCanvas = document.getElementById("ieCanvas");
var ctx = ieCanvas.getContext("2d");
var img = document.getElementById("qrCodeImg");
ctx.drawImage(img, 0, 0);
var filename = "download.png";
window.navigator.msSaveBlob(ieCanvas.msToBlob(), filename);
To summarise:
QR Code PNG -> Blob -> msSaveBlob = Half of the image
QR Code PNG -> Canvas -> Blob -> msSaveBlob = Full image
Related
I am capturing audio data via JavaScript and intend to send it as a base64 encoded String. Before I even send it, I'm just testing to see if I can reconstruct it and play it, and I'm not having much luck.
In the console, the blob looks like this:
How can I retrieve the initial audioBlob object from the base64 encoded data produced by reader.readAsDataURL(audioBlob) so that I can play it in its correct form?
mediaRecorder.addEventListener("dataavailable", function(event) {
audioChunks.push(event.data);
var audioBlob = new Blob(audioChunks);
// PLAYBACK WORKS HERE!
var audioUrl = URL.createObjectURL(audioBlob);
var audio = new Audio(audioUrl);
audio.play();
var reader = new FileReader();
reader.onload = function(event){
var audioData = event.target.result;
// extracting and decoding just the bas64 data, attempting to reconstruct audioBlob
var base64 = audioData.substr(audioData.lastIndexOf(',') + 1);
var decoded = atob(base64);
var reconstructedAudioBlob = new Blob([decoded], {type: "audio/webm;codecs=opus"});
// PLAYBACK FAILS HERE!
var reconstructedAudioUrl = URL.createObjectURL(reconstructedAudioBlob);
var reconstructedAudio = new Audio(reconstructedAudioUrl);
reconstructedAudio.play();
};
reader.readAsDataURL(audioBlob);
});
This results in a console error: Uncaught (in promise) DOMException
The data for event.target.result (if you manage to decode it and play it, enjoy!) is as follows:
data:application/octet-stream;base64,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
You're on the right track. I would create a function that converts the URI to pure binary by removing the base64 headers, and then setting that as the audio source. Using your data, this should do the trick:
function convertURIToBinary(dataURI) {
let BASE64_MARKER = ';base64,';
let base64Index = dataURI.indexOf(BASE64_MARKER) + BASE64_MARKER.length;
let base64 = dataURI.substring(base64Index);
let raw = window.atob(base64);
let rawLength = raw.length;
let arr = new Uint8Array(new ArrayBuffer(rawLength));
for (let i = 0; i < rawLength; i++) {
arr[i] = raw.charCodeAt(i);
}
return arr;
}
let binary = convertURIToBinary(data);
let blob = new Blob([binary], {
type: 'audio/ogg'
});
let blobUrl = URL.createObjectURL(blob);
$("#source").attr("src", blobUrl);
$("#audio")[0].load();
$("#audio")[0].oncanplaythrough = $("#audio")[0].play();
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<audio id="audio" controls>
<source id="source" src="" type="audio/ogg" />
</audio>
<script>
let data = "data:application/octet-stream;base64,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";
</script>
I'm trying to pass a PDF file from the server and display it inside the browser, but the output comes out corrupted.
var blob = atob(data.Package);
console.log(blob);
var file = new Blob([blob], { type: "application/pdf" });
const fileURL = URL.createObjectURL(file);
window.open(fileURL);
Console log outputs something that appears to be correct PDF (just the beginning of output):
I'm saving a copy of the PDF on the server before transfer to make sure it is not corrupt and it works.
URL constructed with URL.createObjectURL(file) seems to be short:
blob:http://localhost:61631/ad749684-2992-4311-8b17-f382a7c687be
server side code:
Object doc = Convert.ToBase64String(_Document.DocumentStream.ToArray());
JObject response = new JObject(new JProperty("Package", JObject.FromObject(doc)));
return new AspResponse<Object>(response);
It looks like the issue is because you need to convert the PDF data into an actual byte array, then pass that into the Blob constructor. Try this:
function convertToByteArray(input) {
var sliceSize = 512;
var bytes = [];
for (var offset = 0; offset < input.length; offset += sliceSize) {
var slice = input.slice(offset, offset + sliceSize);
var byteNumbers = new Array(slice.length);
for (var i = 0; i < slice.length; i++) {
byteNumbers[i] = slice.charCodeAt(i);
}
const byteArray = new Uint8Array(byteNumbers);
bytes.push(byteArray);
}
return bytes;
}
var blob = atob(data.Package);
console.log(blob);
var file = new Blob(convertToByteArray(blob), { type: "application/pdf" });
const fileURL = URL.createObjectURL(file);
window.open(fileURL);
This solution worked for me, basically generating the pdf as a base64 string in the backend and rendering the content in an anchor tag for downloading the pdf file.
https://kainikhil.medium.com/nodejs-how-to-generate-and-properly-serve-pdf-6835737d118e
I'm using a webservice to get a base64 string and I need to show that document to the user as a PDF.
var charactersArray = atob(base64String);
var byteNumbers = new ArrayBuffer(charactersArray.length);
for (var i = 0; i < charactersArray.length; i++) {
byteNumbers[i] = charactersArray.charCodeAt(i);
}
var byteArray = new Uint8Array(byteNumbers);
var file = new File([byteArray], "file.pdf", {
type: "application/pdf",
});
I'm then using this "file" to create a url with
var url = URL.createObjectURL(file);
I'm opening this url in a button with the ng-click directive, but I'm getting loading the PDF.
You need to write the character codes to the byteArray rather than the ArrayBuffer
var charactersArray = atob(base64String);
var len = charactersArray.length;
var byteNumbers = new ArrayBuffer(len);
var byteArray = new Uint8Array(byteNumbers);
for (var i = 0; i < len; i++) {
byteArray[i] = charactersArray.charCodeAt(i);
}
var file = new File([byteArray], "file.pdf", {
type: "application/pdf",
});
I recently work on a project like this and had the same issue. I used the base64-arraybuffer NPM library to convert a base64 string to a byte array.
It's a JS library so it needs to be imported like this after it's installed:
import * as buffer from 'base64-arraybuffer';
The object URL is created like this:
var byteArray = buffer.decode(base64String);
var file = new Blob([byteArray], {type: 'application/pdf'});
var pdfUrl = URL.createObjectURL(file);
I hope this helps!
I have looked at quite a few samples of how people are getting their base 64 byte arrays into PDF but sadly none seem to be working for me. Looked at :
Javascript: Open PDF in new tab from byte array and how to convert byte array to pdf and download
my code is not really any different from what I can tell.
I have a JS-Fiddle here with test byte array data that I can confirm via different base64 encoders/decoders that it is valid.
I am hoping someone can see what I am doing wrong with it. I am using the atob() wrapper to decode the base64 string and it does appear to be doing it correctly. Thanks to anyone who has suggestions.
For those who would prefer to just look at it here:
function go() {
var data = byteData ;
// console.log(data);
var pdfData = atob(data);
console.log(pdfData)
var file = new Blob([pdfData], {type:'application/pdf'});
var fileUrl = URL.createObjectURL(file);
//open it via a link
var fileName = "test.pdf";
var a = document.createElement("a");
document.body.appendChild(a);
a.href = fileUrl;
a.download = fileName;
a.click();
//open it directly
window.open(fileUrl);
}
const byteData = "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bXA6TW9kaWZ5RGF0ZT4yMDE4LTA4LTEzVDE0OjE5OjQ0LTA3OjAwPC94bXA6TW9kaWZ5RGF0ZT4KICAgICAgICAgPHBkZjpQcm9kdWNlcj5BY3JvYmF0IERpc3RpbGxlciAxNS4wIChXaW5kb3dzKTwvcGRmOlByb2R1Y2VyPgogICAgICAgICA8ZGM6Zm9ybWF0PmFwcGxpY2F0aW9uL3BkZjwvZGM6Zm9ybWF0PgogICAgICAgICA8ZGM6dGl0bGU+CiAgICAgICAgICAgIDxyZGY6QWx0PgogICAgICAgICAgICAgICA8cmRmOmxpIHhtbDpsYW5nPSJ4LWRlZmF1bHQiPm5ldyAxPC9yZGY6bGk+CiAgICAgICAgICAgIDwvcmRmOkFsdD4KICAgICAgICAgPC9kYzp0aXRsZT4KICAgICAgICAgPGRjOmNyZWF0b3I+CiAgICAgICAgICAgIDxyZGY6U2VxPgogICAgICAgICAgICAgICA8cmRmOmxpPk1NY0RlbGw8L3JkZjpsaT4KICAgICAgICAgICAgPC9yZGY6U2VxPgogICAgICAgICA8L2RjOmNyZWF0b3I+CiAgICAgICAgIDx4bXBNTTpEb2N1bWVudElEPnV1aWQ6OTg1OWJhYTMtNTI1ZS00MjA3LTljNWUtN2IxMGVmYmM2NzRmPC94bXBNTTpEb2N1bWVudElEPgogICAgICAgICA8eG1wTU06SW5zdGFuY2VJRD51dWlkOjIwNzU1NmJjLTBmMWUtNGNhYS1iNWJhLWUwNzAwZTY5Yzc2MjwveG1wTU06SW5zdGFuY2VJRD4KICAgICAgPC9yZGY6RGVzY3JpcHRpb24+CiAgIDwvcmRmOlJERj4KPC94OnhtcG1ldGE+CiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAKPD94cGFja2V0IGVuZD0idyI/Pg0KZW5kc3RyZWFtDWVuZG9iag0zIDAgb2JqDTw8L0ZpbHRlci9GbGF0ZURlY29kZS9GaXJzdCA0L0xlbmd0aCA0OS9OIDEvVHlwZS9PYmpTdG0+PnN0cmVhbQ0KaN6yUDBQsLHRd84vzStRMNT3zkwpjjY0AgoGxeqHVBak6gckpqcW29kBBBgA3/oLrQ0KZW5kc3RyZWFtDWVuZG9iag00IDAgb2JqDTw8L0ZpbHRlci9GbGF0ZURlY29kZS9GaXJzdCA0L0xlbmd0aCAxNTMvTiAxL1R5cGUvT2JqU3RtPj5zdHJlYW0NCmjefMy9CoMwFEDhV7mbydD8WKVaRJBmFYSWdnGxyQUDwZRrxNevQ+fu5zs1KGga2W1pjsT63hoMgcsb4ZR8XMyUkJlrrnSlKn3Wha6L4qQumVLZrzrYcLfkP6kULgR4Iq2HhFLkIueyj+7/ZKDoNovEOkvxPSUwfk0+BCTQpVAwspdfXNzXkXP58CkgW3AHzdv2K8AAYHM3rA0KZW5kc3RyZWFtDWVuZG9iag01IDAgb2JqDTw8L0RlY29kZVBhcm1zPDwvQ29sdW1ucyA0L1ByZWRpY3RvciAxMj4+L0ZpbHRlci9GbGF0ZURlY29kZS9JRFs8MkQyMkNBQUM5MjQxOEE3Qjg3RkMxODU3NzVGNzAwMzQ+PEZENDkxMzFBNDA0MjM4NEI5NjMxRjRBRjdENDQxQjYwPl0vSW5mbyA5IDAgUi9MZW5ndGggNDgvUm9vdCAxMSAwIFIvU2l6ZSAxMC9UeXBlL1hSZWYvV1sxIDIgMV0+PnN0cmVhbQ0KaN5iYgACJkauCwxMDIxtQIK3HcTqBRHfgBLPFgJZDAyMQILpP5BgZAAIMACRngYbDQplbmRzdHJlYW0NZW5kb2JqDXN0YXJ0eHJlZg0KMTE2DQolJUVPRg0K";
you also need to convert your base64 string to arraybuffer.
function _base64ToArrayBuffer(base64) {
var binary_string = window.atob(base64);
var len = binary_string.length;
var bytes = new Uint8Array(len);
for (var i = 0; i < len; i++) {
bytes[i] = binary_string.charCodeAt(i);
}
return bytes.buffer;
}
from this convert base64 string to arraybuffer
and call it in your code sample like this :-
function go() {
var data = byteData ;
// console.log(data);
// HERE THIS CHANGE IN YOUR CODE
var pdfData = _base64ToArrayBuffer(data);
var file = new Blob([pdfData], {type:'application/pdf'});
var fileUrl = URL.createObjectURL(file);
//open it via a link
var fileName = "test.pdf";
var a = document.createElement("a");
document.body.appendChild(a);
a.href = fileUrl;
a.download = fileName;
a.click();
//open it directly
window.open(fileUrl);
}
this jsfiddle :- fiddle
I'm currently following this tutorial for uploading images to Google Drive from javascript. The example code works perfectly in that you can select a file to upload from your hard drive. I'm now trying to modify it for my purposes so that it instead uploads an image already displayed on the page in standard HTML form:
<img class="image" id="result-image" src="imgres?img_id={{result_id}}" alt="No Image"/>
The supplied Google example looks for a change on the file selector and gets the file data as follows:
var fileData = evt.target.files[0];
Which is then read by a FileReader object as follows:
var reader = new FileReader();
reader.readAsBinaryString(fileData);
reader.onload = function(e) {
...
My question is how do I supply the image object tag in the required type for the FileReader readAsBinaryString method so that the Drive API calls can succeed? Thanks in advance!
Fixed using Joe Coder's solution as follows:
var img = document.getElementById('result-image');
var canvas = document.createElement('canvas');
var ctx = canvas.getContext('2d');
canvas.width = img.width;
canvas.height = img.height;
ctx.drawImage(img, 0, 0);
var dataUrl = canvas.toDataURL('image/png');
var blob = dataUriToBlob(dataUrl);
var reader = new FileReader();
reader.readAsBinaryString(blob);
reader.onload = function(e) {
...
With dataUriToBlob method:
function dataUriToBlob(dataURI) {
// serialize the base64/URLEncoded data
var byteString;
if (dataURI.split(',')[0].indexOf('base64') >= 0) {
byteString = atob(dataURI.split(',')[1]);
}
else {
byteString = unescape(dataURI.split(',')[1]);
}
// parse the mime type
var mimeString = dataURI.split(',')[0].split(':')[1].split(';')[0]
// construct a Blob of the image data
var array = [];
for(var i = 0; i < byteString.length; i++) {
array.push(byteString.charCodeAt(i));
}
return new Blob(
[new Uint8Array(array)],
{type: mimeString}
);
}