Image2DLoadFromFile, Url Loading

Hello, I am having trouble loading an image from Url. I am trying to use the Image2DLoadFromFile, but it crashes here is the code

Code (CSharp):

1.  
2. this.world.removeComponent(Entity,game.Replace);
3. let loadFromFile = this.world.getOrAddComponentData(Entity,ut.Core2D.Image2DLoadFromFile)
4. loadFromFile.imageFile = "http://127.0.0.1:8000/api/unity/media/admin/admin/Object1Image";
5. loadFromFile.maskFile = "http://127.0.0.1:8000/api/unity/media/admin/admin/Object1Image";
6. this.world.setComponentData(Entity,loadFromFile);
7. let image2D = this.world.getOrAddComponentData(Entity, ut.Core2D.Image2D);
8. let sprite2D = this.world.getOrAddComponentData(Entity, ut.Core2D.Sprite2D);
9. sprite2D.imageRegion = new ut.Math.Rect(0,0,1,1);
10. sprite2D.pivot = new ut.Math.Vector2(0,0);
11. image2D.sourceName = "Testing";
12. image2D.pixelsToWorldUnits = 1;
13. image2D.disableSmoothing = true;
14. let spriteRenderer = this.world.getOrAddComponentData(Entity,ut.Core2D.Sprite2DRenderer);
15. spriteRenderer.color = new ut.Core2D.Color(1,1,1,1);
16. spriteRenderer.blending = ut.Core2D.BlendOp.Alpha;
17. this.world.setComponentData(Entity,image2D);
18. this.world.setComponentData(Entity,sprite2D);
19. this.world.setComponentData(Entity,spriteRenderer);
20.  

The image wil load but it will not display saying


This is based on the method from an other thread "Load Picture & Video from DataBase ,or Pic's & Video's Url ?"
I hope that an example code can be provided.

Thank you.

 

Hi Etienne,

thanks for the replay.
I tried your solution, this is what I came up with.

Code (CSharp):

1.                
2.                 // this URL works and I have CORS enabled on the server side. I also tried https://crossorigin.me
3.                 let imageURL = "http://localhost:8000/api/unity/media/admin/kaas/logo";
4.                 let downloadedImg = new Image;
5.                 downloadedImg.crossOrigin = "Anonymous";
6.                 downloadedImg.addEventListener("load", () => {
7.                     let canvas = document.createElement("canvas");
8.                     let context = canvas.getContext("2d");
9.  
10.                     canvas.width = downloadedImg.width;
11.                     canvas.height = downloadedImg.height;
12.  
13.                     context.drawImage(downloadedImg, 0, 0);
14.                     document.getElementsByTagName("body")[0].appendChild(canvas);
15.  
16.                     try {
17.                         localStorage.setItem("saved-image-example", canvas.toDataURL("image/png"));
18.                     }
19.                     catch (err) {
20.                         console.log("Error: " + err);
21.                     }
22.                 }, false);
23.                 downloadedImg.src = imageURL;
24.  

this stores the image in the localstorages as a base64 string, next up I try to add it to the Image2DLoadFromFile like this:

Code (CSharp):

1.                
2. this.world.removeComponent(Entity, Replace);
3. this.world.addComponent(Entity, ut.Core2D.Image2D);
4. this.world.addComponent(Entity, ut.Core2D.Image2DLoadFromFile);
5. let data = this.world.getComponentData(Entity, ut.Core2D.Image2DLoadFromFile);
6. data.imageFile = localStorage.getItem("saved-image-example");
7. data.maskFile = localStorage.getItem("saved-image-example");
8. this.world.setComponentData(Entity, data);

[/code]

I don't get any error, which is not really helping either. I'm probably missing something.

just to recap: I have the image the code / localstorage , now I don't know how to get it to display properly.

 

Code (CSharp):

1.  
2. let test = this.world.createEntity();
3. this.world.addComponent(test, ut.Core2D.Image2D);
4. let im = new ut.Core2D.Image2D();
5. this.world.setComponentData(test,im);
6. let loader = new ut.Core2D.Image2DLoadFromFile();
7. loader.imageFile = "your base64 code ";
8. this.world.addComponentData(test, loader);
9. this.world.addComponentData(test, im);
10.  
11. let esp = this.world.createEntity();
12. let sprite = new ut.Core2D.Sprite2D();
13. sprite.image = test;
14. this.world.addComponentData(esp,sprite);
15.  
16.  
17. var entity = this.world.getEntityByName("your entity name");
18. var sr = this.world.getComponentData(entity,ut.Core2D.Sprite2DRenderer);
19. sr.sprite = esp;
20. this.world.setComponentData(entity,sr);
21.  

I have tried this, and it works.

 

Ah thanks I got it working, now I just need to make a system that fetches the images and storage them in the localstorage. Than another system that puts the images on the sprites.

edit: Do you know how to resize the sprite2D from code?

 

Maybe use the Sprite2DRendererOptions component.

 

Hello there,

I am using the same code as above and I cant seem to get this working. Does anyone know what could be wrong with this :

Code (JavaScript):

1. let QRCode =
2.         "data:image/png;base64,iVBORw0KGgoAAAAN...RK5CYII="
3.  
4.        
5.         // Image2D
6.         let imgEntity = this.world.createEntity();
7.         this.world.addComponent(imgEntity, ut.Core2D.Image2D);
8.         let image = new ut.Core2D.Image2D();
9.         image.pixelsToWorldUnits = 1;
10.         this.world.setComponentData(imgEntity, image);
11.        
12.         // Image2DLoadFromFile
13.         let loader = new ut.Core2D.Image2DLoadFromFile();
14.         loader.imageFile = QRCode;
15.         this.world.addComponentData(imgEntity, loader);
16.        
17.         // Sprite2D
18.         let sprite2DEntity = this.world.createEntity();
19.         let sprite2D = new ut.Core2D.Sprite2D();
20.         sprite2D.image = imgEntity;
21.         this.world.addComponentData(sprite2DEntity, sprite2D);
22.        
23.         //Sprite2DRenderer
24.         var entity = this.world.getEntityByName("Spinner");
25.         var sprite2DRenderer = this.world.getComponentData(entity, ut.Core2D.Sprite2DRenderer);
26.         sprite2DRenderer.sprite = sprite2DEntity;
27.         this.world.setComponentData(entity, sprite2DRenderer);

 

Have you tried other links?

 

Ok so I got it working in with Build Configuration in development mode.

But when I have the build configuration in release mode it does not work. Without any error. Any idea what it could be ?

I am going to investigate the minifying and transpiling options next.

 

I think it has to do with the initialization of the filelds within, The region is automaticly set when in development mode, so you might wanna set it yourself like
sprite.imageRegion = new ut.Math.Rect(0, 0, 1, 1);
not sure if nessecary but you might wanna set the pixelsToWorldUnits on the Image2D
img.pixelsToWorldUnits = 0.01;

 

Thanks for ZyXeM, It’s working with add sprite.imageRegion = new ut.Math.Rect(0, 0, 1, 1); In release mode .But i have other problem that the image in show is with out color blue，change to transparent. the image also go to the right up corner.