Dinkelborg

Loading Texture from File Dialog

Recommended Posts

Hi,

 

I'm working on a project, where the user is supposed to be able to upload his own images as a texture for an object.

 

Now I'm able to get the image like this:

<table id="fileForm">    <tr>        <td>            <input type="file" id="files" name="file[]">        </td>    </tr></table>
var handleFileSelect = function(evt){    var files = evt.target.files;    var reader = new FileReader();    reader.readAsDataURL(files[0]);    var boarding = scene.getMeshByName("Boarding");    reader.onload = function(e)    {        console.log(e.target.result);        //$("#fileForm").append('<img src="'+e.target.result+'"/>');        var mat = new BABYLON.StandardMaterial("mat",scene);        mat.diffuseTexture = new BABYLON.Texture(e.target.result,scene);        boarding.material = mat;    }}$("#files").on("change",handleFileSelect);

Now with the commented line: $("#fileForm").append('<img src="'+e.target.result+'"/>');

I can attach the texture to my form, that works like a charm, however I cannot figure out how I can use the loaded image as a texture.

 

As I tried above I just get the error message: "Uncaught TypeError: Cannot read property 'replace' of null" 

Which is probably because the constructor of BABYLON.Texture expects a URL and instead gets a data stream...

But how can I solve this in a way that will work?

Thanks for any hints or clues.

 

Dinkelborg

Share this post


Link to post
Share on other sites

Hi,

 

 You should have a look to the way we're handling that in our sandbox tool: http://www.babylonjs.com/sandbox

 

 Specifically, have a look here in our source code in LoadImage: https://github.com/BabylonJS/Babylon.js/blob/master/src/Tools/babylon.tools.ts#L205 which uses data streams and createObjectURL to provide a texture to Babylon.JS

 

Cheers,

 

David

Share this post


Link to post
Share on other sites

I'm sorry but this doesn't really help me:
- I tried to look at the source of the sandbox, however it seems very narrow and I couldn't really find anything related...

- I looked at the LoadImage function, and while I cannot understand it entirely I think it creates an Image(); as well...

 

In the end I'm left with the same problem that I started with again:
- I can load an image from a local file, but I cannot create a Texture from the image.

 

...I'm sorry if I missed something I don't understand how this function works

//ANY database to do!            if (database && database.enableTexturesOffline && Database.IsUASupportingBlobStorage) {                database.openAsync(loadFromIndexedDB, noIndexedDB);            }            else {                if (url.indexOf("file:") === -1) {                    noIndexedDB();                }                else {                    try {                        var textureName = url.substring(5);                        var blobURL;                        try {                            blobURL = URL.createObjectURL(FilesInput.FilesTextures[textureName], { oneTimeOnly: true });                        }                        catch (ex) {                            // Chrome doesn't support oneTimeOnly parameter                            blobURL = URL.createObjectURL(FilesInput.FilesTextures[textureName]);                        }                        img.src = blobURL;                    }                    catch (e) {                        img.src = null;                    }                }            }

What does it need as a parameter? Just "localStorage"?  And how can one use this function to create a new BABYLON.Texture? 

I would be very glad about an example that would show how to use this to create a Texture...

Share this post


Link to post
Share on other sites

I found this thread

 

that describes the same problem that I'm facing and the authors problem, like mine remains unanswered:

 

While a function like BABYLON.Tools.LoadImage() will allow one to load an Image, how does one create a BABYLON.Texture from that?

 

"binyan" describes the same problem in his last post...

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

  • Recently Browsing   0 members

    No registered users viewing this page.