Jump to content

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


vmars316
 Share

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

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
 Share

×
×
  • Create New...