Access response headers for texture loaded from remote service

Help & Support
1

I have a remote image render service that I am using to create textures dynamically to use within my app.
Here is an example of the code…

var self = this;

var image = new pc.Asset("a texture", "texture", {
	url: this.renderServer + "getimage.ashx?scene=" + this.sceneName
});

this.app.assets.add(image);

var onSceneImageReady = function(asset) {
	self.imageTarget.element.textureAsset = asset;
	//TBD: Read the response headers to get meta data about render.
};
    
// Start async loading the image asset
image.ready(onSceneImageReady);
this.app.assets.load(image);

This works to get the image as a texture but I also need access to the response headers for the request to get additional metadata that is provided by the service.

Is it possible to get the response headers too?

2

In which case, you may want to use https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest directly or https://developer.playcanvas.com/en/api/pc.Http.html

And then create the asset directly without loading it (changing the asset.loaded = true directly for example)

3

Thanks. I’ll give that a try.

4

@yaustar Could you please point me to an example of creating the asset directly? I’m able to use pc.http.get to load the data, and I can get to the headers I need but it is not working to create the asset. Here is my code…

image = new pc.Asset(this.sceneName, "texture", {
	 url: this.renderServer + "getimage.ashx?scene=" + this.sceneName
 });

this.app.assets.add(image);

var xhr = pc.http.get(image.file.url,{responseType: "arraybuffer"}, function (err, response) {
	console.log(xhr.getAllResponseHeaders());  // this works to get the headers
	image.resource = response;		// This does not work
	image.loaded = true;
	onSceneImageReady(image);
});

the response type defaults to “text” but I have tried “arraybuffer” and “blob” and those don’t work either.

thank you.

5

On my phone at the moment but the easiest way to do this is to use the asset registry directly

https://developer.playcanvas.com/en/api/pc.AssetRegistry.html#loadFromUrl

6

Oh wait, you needed the response headers too :thinking: That might be tricky for an image.

Since you need this, you would have to convert the response from the XMLHttpRequest to a blob and use that as the Image source.

7

@BillWestrick Here’s an example project: https://playcanvas.com/editor/scene/1119182

Code:

// initialize code called once per entity
App.prototype.initialize = function() {
    var self = this;
    var url = "https://raw.githubusercontent.com/yaustar/yaustar.github.io/master/flappy/files/assets/20731438/1/spritesheet.png";
    var material = this.app.assets.find('Murray Material', 'material').resource;

    // Taken from https://gist.github.com/santisbon/a7c221780b528bd3ebb8
    var request = new XMLHttpRequest();
    request.open('GET', url);
    request.responseType = 'blob';

    // When the request loads, check whether it was successful
    request.onload = function () {
        if (request.status === 200) {
            var response = request.response;
            var imageURL = URL.createObjectURL(response);
            self.app.assets.loadFromUrlAndFilename(imageURL, 'Fill Murray Image', 'texture', function(err, asset) {
                material.diffuseMap = asset.resource;
                material.update();
                URL.revokeObjectURL(imageURL);
            });
        } else {
            console.log('Image didn\'t load successfully; error code:' + request.statusText);
        }
    };

    request.onerror = function () {
        console.log('There was a network error.');
    };

    // Send the request
    request.send();
};