I need to display image/jpeg in my web application as well as android app with same code and used the below working javascript code for the same:
var xhr = new XMLHttpRequest();
xhr.open('GET', value, 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;
localSrc = urlCreator.createObjectURL( blob );
var img = new Image();
img.src=localSrc;
$('#jpg'+i).append(img);
};
xhr.send();
The performance is too slow when tested in android 4.4.2, like its waiting to send the xhr request after collecting all the image url's. Delay is more in android compared to web application .
How can I improve the performance ? Is there any other method to do the same with better performance?
Related
I am streaming ArrayBuffers from a python server and am trying to interpret each one as an image on the client side with javascript. They are being received as arraybuffers in javascript. However I cant get them to be readable by the image tags src attribute. I have tried generating them into Blob objects then using window.URL.createObjectURL(blob). That hasnt work either.
The blob url looks like this blob:null/e2836074-64b5-4959-8211-da2fc24c35a6 is that wrong?
Does any have any suggestions/know a solution.
Thanks a lot.
var arrayBuffer = new Uint8Array(stream.data);
var blob = new Blob([arrayBuffer], {type: "image/jpeg"});
var urlCreator = window.URL || window.webkitURL;
var imageUrl = urlCreator.createObjectURL( blob );
console.log(imageUrl);
img.src = imageUrl;
array buffer image
If you have any control over things, you should use the responseType of blob on your Javascript call. This will let you use the data you are getting from your server directly instead of attempting to access it via an ArrayBuffer
See the following fiddle for an example: https://jsfiddle.net/ort74gmp/
// Simulate a call to Dropbox or other service that can
// return an image as a blob
var xhr = new XMLHttpRequest();
// Use JSFiddle logo as a sample image to avoid complicating
// this example with cross-domain issues.
xhr.open( "GET", "https://fiddle.jshell.net/img/logo.png", true );
// Ask for the result as an ArrayBuffer.
xhr.responseType = "blob";
xhr.onload = function( e ) {
var blob = this.response;
var reader = new FileReader();
reader.onload = function() {
var dataURL = reader.result;
document.querySelector('#photo').src = dataURL;
}
reader.readAsDataURL(blob);
};
xhr.send();
I'm having troubles instantiating a new file object in javascript.
Here's the general gist of what I'm trying to do. There is client side code that expecting a "file" type object. I need to access the file that's located on the server (game.smc), download it to the local machine and feed it to the client side code.
I did some research and found that creating a new blob object is the first step. But in the code below the blob object remains null and is never getting populated. Does the path in the xhr.open need to have the entire url? Maybe i'm missing an entire concept here not sure.
var blob = null;
var xhr = new XMLHttpRequest();
xhr.open("GET", "/Roms/game.smc");
xhr.responseType = "blob";
xhr.onload = function()
{
blob = xhr.response;
}
xhr.send();
Once I can get the blob object populated I can then do this to convert it to a file object.
function blobToFile(theBlob, fileName) {
theBlob.lastModifiedDate = new Date();
theBlob.name = fileName;
return theBlob;
}
This is what I ended up doing. Shows how to get the blob object as well as convert it to a file type.
function autoLoadGame(fileName) {
var gameLocation = '/Content/Roms/Snes/' + fileName;
var blob = null;
var xhr = new XMLHttpRequest();
xhr.open("GET", gameLocation, true);
xhr.onreadystatechange = function () {
if (xhr.readyState == XMLHttpRequest.DONE) {
var blob = xhr.response;
var file = new File([blob], fileName, { type: '', lastModified: Date.now() });
snes_readfile(file);
}
}
xhr.responseType = "blob";
xhr.send();
}
I try to use blob to show image in website but how I can get URL outside onload to return it in function?
var xhr = new XMLHttpRequest();
xhr.open("GET", "//fiddle.jshell.net/img/logo.png", true);
xhr.responseType = "arraybuffer";
xhr.onload = function(e) {
var arrayBufferView = new Uint8Array(this.response);
var blob = new Blob([arrayBufferView]);
var urlCreator = window.URL || window.webkitURL;
var imageUrl = urlCreator.createObjectURL(blob);
//window.URL.revokeObjectURL(imageUrl);
};
xhr.send();
if you use imageUrl=urlCreator.createObjectURL(blob); instead var imageUrl=urlCreator.createObjectURL(blob); you will put your variable in global scope and be able to access outside the function.
function yo(lo) {
window.onload=function(e){
lo("give me shiny gold");
}}
yo(function(work) {
alert(work);
});
could someone prompt me - how to save "blob in memory" to a file using Java Script?
e.g. I have in the page next blob-image:
<img src="blob:https%3A//drive.google.com/851b979c-92e9-4ef2-9152-8935f7793630" class="g-img">
and I need to save this blob to a file (png/jpg).
The next code just gives:
GET blob:https%3A//drive.google.com/851b979c-92e9-4ef2-9152-8935f7793630 404 (Not Found)
so it seems, usual way to get the blobs doesn't work here.
Is there any workaround to save this blob-images from browser memory to a file, or, saying more exactly - to get them as a real blob using only "src" tag value?
Thank you.
var srcEl = evt.srcElement;
var CurI = document.getElementsByClassName('g-img');
[].forEach.call(CurI, function (el) {
var xhr = new XMLHttpRequest();
xhr.open('GET', el.src, true);
xhr.responseType = 'arraybuffer'; // xhr.responseType = 'blob';
xhr.onload = function(e) {
if (this.status == 200) {
var myBlob = this.response;
var reader = new window.FileReader();
reader.readAsDataURL(myBlob);
console.log(myBlob);
}
};
xhr.send();
console.log(el.src);
// saveAs(myBlob, 'my2image.png');
}
p.s. to use mediarecorder?
In chrome it is reported that by using a code like the following, it is possible to do binary communication with a server (instead of the traditional base64 communication).
var xhr = new XMLHttpRequest();
xhr.open(method, url, true);
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
xhr.responseType = 'arraybuffer';
xhr.onload = ...
var data = new ArrayBuffer(byteArray.length);
var ui8a = new Uint8Array(data);
for (i=0; i<byteArray.length; i++) {
ui8a[i] = byteArray[i] & 0xff;
}
var bb = new BlobBuilder();
bb.append(data);
xhr.send(bb.getBlob());
Assuming Chrome and Safari embracing HTML5 in a similar fashion, is there a way to do this in Safari and iOS Safari?
new BlobBuilder() does not work on Mobile Safari, you can use new Blob() like this:
xhr.send( new Blob([data], { 'type' : ... }) );