I have used the following code
$scope.download = function() {
var request = new XMLHttpRequest();
request.responseType = "arraybuffer";
request.onload = function() {
var blob = new Blob([request.response], {type: "image/png"})
var urlCreator = window.URL || window.webkitURL;
$scope.apiImgSrc = urlCreator.createObjectURL( blob );
angular.element("#apiImage").attr('src', $scope.apiImgSrc);
}
request.open("POST", "/customer/downloadlogo");
request.setRequestHeader("Content-Type", "application/json;charset=UTF-8");
request.send(JSON.stringify({
"customerSeq": 1000,
"userId": "TEST-USER"
}));
}
It is not working in IE 11 and returns the error as the following image
Related
I would like to know please
How to Refresh var xhr = new XMLHttpRequest();
and set the width and height of blob
It's from a App that sends a Base64String Image(WebCam)
I would like to Refresh portion of the page to get the new Image.
It works manually ...
<!DOCTYPE html>
<html>
<body>
<img id="photo" width="400" height="400"/>
<script>
var xhr = new XMLHttpRequest();
xhr.open( "GET", "http://192.168.1.186:8080/dwkpic.html", true );
xhr.responseType = "arraybuffer";
xhr.onload = function( e ) {
var arrayBufferView = new Uint8Array( this.response );
var blob = new Blob( [ arrayBufferView ], { type: "image/jpeg" } );
var urlCreator = window.URL || window.webkitURL;
var imageUrl = urlCreator.createObjectURL( blob );
var img = document.querySelector( "#photo" );
img.src = imageUrl;
};
xhr.send();
</script>
</body>
</html>
I have tried setTimeout()
<!DOCTYPE html>
<html>
<body>
<img id="photo" width="400" height="400"/>
<script>
setTimeout(function(){
var xhr = new XMLHttpRequest();
xhr.open( "GET", "http://192.168.1.186:8080/dwkpic.html", true );
xhr.responseType = "arraybuffer";
xhr.onload = function( e ) {
var arrayBufferView = new Uint8Array( this.response );
var blob = new Blob( [ arrayBufferView ], { type: "image/jpeg" } );
var urlCreator = window.URL || window.webkitURL;
var imageUrl = urlCreator.createObjectURL( blob );
var img = document.querySelector( "#photo" );
img.src = imageUrl;
img.width="400";
img.height="400";
};
xhr.send();
}, 10);
</script>
</body>
</html>
Thanks
if you want to run the function periodically, you just have to use setInterval instead of timeout.
setInterval(function(){
var xhr = new XMLHttpRequest();
xhr.open( "GET", "http://192.168.1.186:8080/dwkpic.html", true );
xhr.responseType = "arraybuffer";
xhr.onload = function( e ) {
var arrayBufferView = new Uint8Array( this.response );
var blob = new Blob( [ arrayBufferView ], { type: "image/jpeg" } );
var urlCreator = window.URL || window.webkitURL;
var imageUrl = urlCreator.createObjectURL( blob );
var img = document.querySelector( "#photo" );
img.src = imageUrl;
img.width="400";
img.height="400";
};
xhr.send();
}, 10);
but keep in mind, this approach will make 100 requests per second which is a lot of requests. So it is possible that browser might get overloaded.
I think what you want to do is actually streaming data, so you can maybe look at at how to stream data to browser.I don't know if you control the backend but if you do, you can also pipe the data.
I have this event handler that does downloading and that's working great on all browsers except IE, so I handled it with msSaveBlob and it download file, but when I open it, it said format isn't good, so my guess is that I don't use valid data in blob.
$(document).on('click', '.register-file-uploader-download-file', function () {
let $fileResultsItem = $(this).closest('.form-fields__file-results-item');
const fileName = $fileResultsItem.find('.multiple-files-upload-item').data('filename');
const fileUrl = $fileResultsItem.find('.multiple-files-upload-item').val();
if (fileUrl.length > 0) {
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function () {
if (this.readyState === 4 && this.status === 200) {
var url = window.URL || window.webkitURL;
let blobFileUrl = url.createObjectURL(this.response);
if (window.navigator && navigator.msSaveBlob) { // For IE
const blobObj = new Blob([this.response], { type: 'application/octet-stream' });
return navigator.msSaveBlob(blobObj, fileName);
}
const a = document.createElement('a');
a.style.display = 'none';
a.href = blobFileUrl;
a.download = `${fileName}`;
document.body.appendChild(a);
a.click();
url.revokeObjectURL(blobFileUrl);
}
};
xhr.open('GET', fileUrl);
xhr.responseType = 'blob';
xhr.send();
}
});
I found error. Code is working fine, problem is in fact that I tried to download image that was uploaded on stage server, and when I uploaded and downloaded it and it's working
I'm trying to convert the Blob data I receive to an array as follows:
var xhr = new XMLHttpRequest();
xhr.open('GET', "chrome://favicon/http://www.cnn.com/", true);
xhr.responseType = 'blob';
xhr.onload = function (e) {
if (this.status == 200) {
var favicon = new Uint8Array(this.response);
}
};
xhr.send();
But the line:
new Uint8Array(this.response);
doesn't result in an array. What's wrong here?
Figured it out:
var xhr = new XMLHttpRequest();
xhr.open('GET', "chrome://favicon/http://www.cnn.com/", true);
xhr.responseType = 'blob';
xhr.onload = function (e) {
if (this.status == 200) {
// get binary data as a response
//var blob = this.response;
//var favicon = new Uint8Array(this.response);
var reader = new FileReader();
reader.onload = function (e) {
mDataToTransmit.favicon = e.target.result;
transmitData();
};
reader.readAsDataURL(this.response);
}
};
xhr.send();
I'm trying to get a MediaStream object into a blob, but I have some problems.
This is the part of my script for the UserMedia component:
var mediastream = undefined;
var blob = undefined;
var video = document.getElementById('test');
This is my script where I'm trying my test:
var mediastream = undefined;
var blobUrl = undefined;
var video = document.getElementById('test');
function successCallback (stream) {
mediastream = stream;
blobUrl = URL.createObjectURL(mediastream);
var xhr = new XMLHttpRequest();
xhr.open('GET', blobUrl, true);
xhr.responseType = 'arraybuffer';
xhr.withCredentials = true;
xhr.onreadystatechange = function () {
console.log('xhr.readyState='+xhr.readyState);
if (xhr.readyState !== 4) {
return;
} else {
var myBlob = this.response;
}
function errorCallback (stream) {
console.log('error');
}
Setting the blobUrl to the video.src I don't have any problem:
video.src = blobUrl; <- WORKS
But if I call the urlBob url (like this one: blob:http%3A//localhost%3A8080/b1ffa5b7-c0cc-4acf-8890-f5d0f08de9cb ) I obtain HTTP status 404.
For sure there is something wrong on my implementation.
Any suggestions?
Thank you!
i am trying to play a bufferd video by blob, but i had a problem with the buffer, when i give a blob url to video dom, the buffer set as full, but it's not, so how can i manage the buffer system for these type of videos.
some of code are below of my project.
http://jsfiddle.net/GV4d6/1/
codes are:
<video width=500 heigth=400 controls id='myvideo'></video>
<script>
var xhr = new XMLHttpRequest();
var video = document.getElementById("myvideo");
xhr.open('GET', 'http://www.auby.no/files/video_tests/h264_720p_mp_3.1_3mbps_aac_shrinkage.mp4', true);
xhr.responseType = 'arraybuffer';
xhr.setRequestHeader("Range", "bytes=0-2000000")
xhr.send(null);
var blobVideo = new Blob();
xhr.onreadystatechange = function (oEvent) {
var arrayBuffer = this.response;
if (this.readyState>3) {
var byteArray = new Uint8Array(arrayBuffer);
blobVideo = new Blob([byteArray], { type: "text" });
var url = window.URL = window.webkitURL;
videoUrl = url.createObjectURL(blobVideo);
video.src = videoUrl;
}
}
</script>