Jump to content

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


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 ?


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">


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




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>
<meta charset="utf-8">
<title>Pixi.js goose.png</title>
body {
margin: 0;
padding: 0;
background-color: #000;
<script src="C:\pixi.js\bin\pixi.min.js"></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

// 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

// Start animating

function animate() {

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

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

// Render our container


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 :


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 .


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...