Jump to content

How to pass 'html *.png' to javascript ?


vmars316

Recommended Posts

I am running pixi.js

 

To get html to run i user would have to :

In chrome , I have to add command line switchw=es , "C:\Program Files (x86)\Google\Chrome\Application\chrome.exe" --allow-file-access-from-files

In IE , i have to click on the BLOCKED button

 

So i was thinking , i could load image fine with html *.png

and then grab it in js from html , maybe something like document.GetElementById .

But I don't know how exactly to write that code .

 

Possible ?

Thanks..vm

Link to comment
Share on other sites

Hello & Thanks ,


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 :

<div id="images">

<br><img id="truth02id" name="truth02png" src="truth02.png">


</div>


But If I use either of the two javascript code below ,

the browser considers it an "File access violation" :


// Add our image as a sprite




// OR

loader


.add("images/truth02.png")


.load(setup);



I have seen examples of using something like this (I don't know how to put it all together -need HELP) :

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



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




<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Pixi.js goose.png</title>
<style>
body {
margin: 0;
padding: 0;
background-color: #000;
}
</style>
</head>
<body>
<script src="C:\pixi.js\bin\pixi.min.js"></script>
<script>


////////////////
var renderer = PIXI.autoDetectRenderer(160, 144);


// Set the background color of the renderer to a baby-blue'ish color
renderer.backgroundColor = 0x3498db;


// Append the renderer to the body of the page
document.body.appendChild(renderer.view);


// Create the main stage for your display objects
var stage = new PIXI.Container();


////////////////
// Add our image as a sprite




// Set the anchor in the center of our sprite
goose.anchor.x = 0.5;
goose.anchor.y = 0.5;


// Position our goose in the center of the renderer
goose.position.x = renderer.width / 2;
goose.position.y = renderer.height / 2;


// Add the goose to the stage
stage.addChild(goose);
////////////////


// Start animating
animate();


function animate() {
requestAnimationFrame(animate);


////////////////
// Rotate our goose clockwise
goose.rotation += 0.1;


// Rotate our goose counter-clockwise
// goose.rotation -= 0.1;
////////////////


// Render our container
renderer.render(stage);
}
////////////////
</script>
</body>
</html>

post-38064-0-78817300-1452561104.png

Edited by vmars316
Link to comment
Share on other sites

Thanks :

Yes , I am beginning to understand that :(

I wonder how Enchant.js does it then .

It works great !

Trouble is , they stopped updating it .

 

Oh , here is a working example :

http://liesandcowpies.com/testMe/~cat-source-WIP-experiment.html

That means that no one can do a "save as" for the page above

and have it run on their computer ,

Unless they specify saveAs "html only" option , and then to run it they must be connected to internet .

 

justsomeguy , Thanks for sticking with me .

..Vern

Link to comment
Share on other sites

Well, they probably don't use ajax to load local files. Regular links still work locally, but ajax loading does not. Modern browsers also have the FileReader API, I'm not sure what changes if any to that happen when the file is run locally.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...