3 Replies - 686 Views - Last Post: 12 January 2016 - 09:14 AM

#1 vmars.us  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 2
  • Joined: 11-January 16

Getting a LOCAL image file with javascript ?

Posted 11 January 2016 - 09:12 PM

Hello & Thanks :

I am learning pixi.js .
Getting a LOCAL image file with javascript causes an "File access violation" ;
"File access violation" in Chrome
"Click Button to UnBlock" in IE .

No probs getting an image file off internet or server with javascript,
BUT Getting a LOCAL image file with javascript causes an "File access violation" .

No problem with html5 getting a LOCAL file :

But If I use either of the two javascript code below ,
the browser considers it an "File access violation" :


I have seen examples of using something like below (I don't know how to put it all together -need HELP) :
<img id="truth02id" name="truth02png" src="images/truth02.png">

var truth02 = new PIXI.Sprite.fromImage(document.getElementById("truth02id").src = "images/truth02.png");


Here is the working code (except for the "access violation") :

<!doctype html>
<meta charset="utf-8">
<title>Moving sprites</title>
<body>
<script src="C:\pixi.js\bin\pixi.js"></script>
<script>
//Aliases
var Container = PIXI.Container,
    autoDetectRenderer = PIXI.autoDetectRenderer,
    loader = PIXI.loader,
    resources = PIXI.loader.resources,
    TextureCache = PIXI.utils.TextureCache,
    Texture = PIXI.Texture,
    Sprite = PIXI.Sprite;
//Create a Pixi stage and renderer and add the 
//renderer.view to the DOM
var stage = new Container(),
    renderer = autoDetectRenderer(256, 256);
document.body.appendChild(renderer.view);
loader
  .add("images/cat.png")
  .load(setup);
//Define any variables that are used in more than one function
var cat;
function setup() {
  //Create the `cat` sprite 
  cat = new Sprite(resources["images/cat.png"].texture);
  cat.y = 96; 
  stage.addChild(cat);
 
  //Start the game loop
  gameLoop();
}
function gameLoop(){
  //Loop this function 60 times per second
  requestAnimationFrame(gameLoop);
  //Move the cat 1 pixel per frame
  cat.x += 1;
  //Render the stage
  renderer.render(stage);
}
</script>
</body>

Attached image(s)

  • Attached Image


Is This A Good Question/Topic? 0
  • +

Replies To: Getting a LOCAL image file with javascript ?

#2 Dormilich  Icon User is offline

  • 痛覚残留
  • member icon

Reputation: 4138
  • View blog
  • Posts: 13,074
  • Joined: 08-June 10

Re: Getting a LOCAL image file with javascript ?

Posted 12 January 2016 - 01:39 AM

Quote

Getting a LOCAL image file with javascript causes an "File access violation" ;

thatís a security feature. imagine you request the file with the userís private RSA keys (~/.ssh/id_rsa) instead of an arbitrary image.
Was This Post Helpful? 0
  • +
  • -

#3 vmars.us  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 2
  • Joined: 11-January 16

Re: Getting a LOCAL image file with javascript ?

Posted 12 January 2016 - 08:57 AM

Thanks ,
but ~/.ssh/id_rsa is another whole ballgame .

Does this(below) give the address of truth02.png or what ?
..vm
Was This Post Helpful? 0
  • +
  • -

#4 Dormilich  Icon User is offline

  • 痛覚残留
  • member icon

Reputation: 4138
  • View blog
  • Posts: 13,074
  • Joined: 08-June 10

Re: Getting a LOCAL image file with javascript ?

Posted 12 January 2016 - 09:14 AM

Quote

Does this(below) give the address of truth02.png or what ?

donít know, but I wouldnít bet on it.

the only way to get a local file into JS is via <input type="file"> (that is, an explicit user selection), then you can use the FileReader API or some ActiveX in IE.

be aware that you load the pixi.js locally, which will only ever work on this particular machine.

Quote

I have seen examples of using something like below (I don't know how to put it all together -need HELP) :
<img id="truth02id" name="truth02png" src="images/truth02.png">

var truth02 = new PIXI.Sprite.fromImage(document.getElementById("truth02id").src = "images/truth02.png");

no need to assign the image again when you need the image. so probably more along
var truth02 = new PIXI.Sprite.fromImage(document.getElementById("truth02id"));
but that would be explained in the pixi.js docs.
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1