0

I have an X3D page with some solid primitives. I want the user to be able to select her own image to be used as a texture, but I want the page to be all client side.

Can JavaScript insert an image into the HTML without uploading the image to a server? I have a vague memory of seeing this option somewhere. The image was changed to a PNM and inserted as text and then reconverted to an image for display/processing. I cannot find a reference anywhere and I may be using the wrong search terms. There are webpages (i think) that ask for an image to be selected for display without ever uploading. What is this function/script called? Has some other js function been developed that does this more efficiently? Have I gone mad?

JavaScript does this all the time with text. fill out a form and see the text right there.

My example X3D is below.

enter code here

enter code here enter code here 

enter code here    <shape>
    <appearance>
      <material diffuseColor='0.5 0.2 1.0'> </material>
      <ImageTexture url=' "THE_CLIENT_IMAGE.png" '></ImageTexture>
    </appearance>
    <sphere radius="3" > </sphere>
    </shape>
</Transform>
Molly
  • 59
  • 8
  • You can add a file input – jabaa Apr 15 '22 at 18:04
  • 1
    Does this answer your question? [Preview an image before it is uploaded](https://stackoverflow.com/questions/4459379/preview-an-image-before-it-is-uploaded) – jabaa Apr 15 '22 at 18:07
  • @devlincarnate You can access the file input, read it or modify it without or before uploading it. You could even create a data url of it. – jabaa Apr 15 '22 at 18:07

1 Answers1

1

Working snippet:

const img = document.querySelector('#img')
document.querySelector('#file').addEventListener('input', event => {
  if (event.target.files.length === 0) {
    console.error('No file provided')
    return
  }
  const reader = new FileReader()
  reader.addEventListener('loadend', () => {
    img.src = reader.result
  })
  reader.readAsDataURL(event.target.files[0])
})
<input type="file" id="file">
<img id="img">

Change <img> to ImageTexture and done

Konrad
  • 21,590
  • 4
  • 28
  • 64
  • 1
    Q: Is there supposed to be a space before addEvent? document.querySelector('#file'). addEventListener('input', event => { Q: what is this returning? a variable standing for the image file? where is it? what is the variable? how do i insert the variable into the html tags? is the image called file? #file? "#file"? ahhh!!!! 404 404 404 404 – Molly Apr 17 '22 at 00:52
  • `reader.result` is what you want is, it I'd a blob. You have to create an url from blob and create a new image with src equal to that url – Konrad Apr 17 '22 at 20:15
  • – Molly Apr 18 '22 at 22:47
  • @Molly what is this? – Konrad Apr 19 '22 at 11:06
  • My formating gets messed up when i cut and paste. sorry. I know how to get a users image into a canvas but, I need to get a users image into an X3D texture tag so it gets mapped to the animated 3d object. the x3d line of code looks like this: Its driving me mad. i thought maybe url=#file would be correct but no. how do i get the js to insert the image blob into ? Thank you for being patient with me. – Molly Apr 20 '22 at 00:28
  • @Molly I added fully working snippet – Konrad Apr 20 '22 at 18:30
  • Thank you for helping me. I have some questions about why this isn't working... Should there be script tags somewhere? Does this go in the head or body section? When you say "change img to imagetexture"... which one(s)?? There are 5 "img" strings in your code. I have tried many edits to get it to work. but it doesnt even work on an ordinary img tag. my head is sore from banging it on the wall. – Molly Apr 20 '22 at 23:57