Search Unity

Image2DLoadFromFile, Url Loading

Discussion in 'Project Tiny' started by ZyXeM, Jan 4, 2019.

  1. ZyXeM

    ZyXeM

    Joined:
    Jul 10, 2015
    Posts:
    6
    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
    upload_2019-1-4_15-36-49.png

    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.
     

    Attached Files:

    Last edited: Jan 4, 2019
  2. etienne_unity

    etienne_unity

    Unity Technologies

    Joined:
    Aug 31, 2017
    Posts:
    49
  3. valourus123

    valourus123

    Joined:
    Nov 12, 2018
    Posts:
    12
    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.
     
  4. aafasou

    aafasou

    Joined:
    Jan 2, 2019
    Posts:
    7
    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.
     
    valourus123 likes this.
  5. valourus123

    valourus123

    Joined:
    Nov 12, 2018
    Posts:
    12
    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?
     
  6. aafasou

    aafasou

    Joined:
    Jan 2, 2019
    Posts:
    7
    Maybe use the Sprite2DRendererOptions component.
     
  7. Kobusvdwalt

    Kobusvdwalt

    Joined:
    Jul 8, 2012
    Posts:
    4
    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);
     
  8. aafasou

    aafasou

    Joined:
    Jan 2, 2019
    Posts:
    7
    Have you tried other links?
     
  9. Kobusvdwalt

    Kobusvdwalt

    Joined:
    Jul 8, 2012
    Posts:
    4
    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.
     
  10. ZyXeM

    ZyXeM

    Joined:
    Jul 10, 2015
    Posts:
    6
    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;
     
    Kobusvdwalt likes this.
  11. FutureWang

    FutureWang

    Joined:
    May 24, 2018
    Posts:
    6
    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.