Search Unity

  1. We are looking for feedback on the experimental Unity Safe Mode which is aiming to help you resolve compilation errors faster during project startup.
    Dismiss Notice
  2. Good news ✨ We have more Unite Now videos available for you to watch on-demand! Come check them out and ask our experts any questions!
    Dismiss Notice

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:
    56
  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:
    13
    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.
     
unityunity