Explore our sites

Stack Exchange
tour help careers 2.0
Take the tour ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.
up vote 0 down vote favorite
1

I am currently designing an HTML5 Canvas application and am using an Image Uploader so that users can upload local images to the server and then modify the image on canvas (as a number of manipulations to external sources will give you a security exception).

I have some JS included that goes something like this:

<script type="text/javscript">
    var editImage = new Image; // Global scope; not in a function
    function setupCanvas() {}
</script>

Once the image has been successfully loaded I echo something like this:

echo '
<script type="text/javascript">
    alert("'.$upload_image.'"); 
    window.editImage=new Image(); 
    window.editImage.src=\''.$upload_image.'\'; 
    alert(window.editImage.src);
    setupCanvas();
</script>'

Now the output I get from the alert() statements are $upload_image. But when I check FireBug, it'll say that the editImage var that I have declared GLOBALLY in a separate script is still the ORIGINAL image source, NOT $upload_image. Furthermore, it'll say the setupCanvas() method that I have called will be UNDEFINED, although it is in the GLOBAL scope.

I am assuming when I do this with PHP there must be some scope issues - is there a way around this?

share|improve this question
 
Are you sure that the JS is before the echo on the page? –  tjm Dec 18 '10 at 5:28
 
This might very well be the case; how do I ensure it is AFTER the JS includes? I checked the HTML post-PHP action and the added script from PHP appears after the previous JS includes; would this be enough? –  J Kao Dec 18 '10 at 5:44
 
I tried including a test.php: echo '<script type="text/javascript">alert(editImage.src);</script>'; and this seems to produce an undefined variable error - even if I place the include AFTER the other includes... although this might be due to image loading, but I still find this surprising. –  J Kao Dec 18 '10 at 5:54
 
Nope, PHP has completely nothing to do here. PHP stays thousand miles away from your scope. So, do all things without PHP first, with predefined images, etc. Debug it until it runs well, and only then make your JS generated by PHP. Got it? –  Your Common Sense Dec 18 '10 at 6:42
 
Okay, I got it partially working thanks to your help! I copied the JS that I output with PHP into the area where I echo. This gave the SAME error; so it was NOT a PHP issue. This was due to the document probably not loading; so I modified it to this: $(document).ready(function() { editImage=new Image(); editImage.src='graffpic/uploads/fracture_1292689775.jpg';; console.log(editImage.src); setupCanvas(); }); –  J Kao Dec 18 '10 at 16:39
show 1 more comment

2 Answers

up vote 1 down vote accepted

Sorry code block in comments was unreadable, this is how I got it working with JUST javascript:

$(document).ready(function() {
   editImage=new Image(); 
   editImage.src='http://graffpic/uploads/fracture_1292689775.jpg'; 
   console.log(editImage.src); 
   setupCanvas();           
});

Only problem is when I output it with PHP it will say $ is UNDEFINED - so this is most likely a loading issue - can anyone give me a bit more detail on this and what to do? I COULD import the jQuery library AGAIN, but that seems clunky; either that or I could import the code fragment that is needed for $(document).ready() which is again quite clunky. Any help?

share|improve this answer
 
The issue ended up being that the output was being captured in an iFrame that I was using.. redirected the output elsewhere and it works... sorry about the confusion –  J Kao Dec 26 '10 at 22:08
add comment
up vote 0 down vote

Ah! I hope it's actually your problem too. Not just a typo in your post, cause I've been scratching my head for ages with some code based on your example. It's not simply that your first code block reads,

<script type="text/javscript">

Not

<script type="text/javascript">

is it? (Note the missing 'a' in 'javascript' from the first line.)

share|improve this answer
 
Sorry about the example; I didn't copy and paste it directly. But I have spelt it correctly; will debug with pure JS for now- will edit now. –  J Kao Dec 18 '10 at 16:24
 
That's ok, no worries. It serves me right for not fully reading what I was looking at and just starting with a copy and paste myself. Let us know how it goes. I was thinking that since you're dealing with images you might need to be waiting for window.onload but then you shouldn't see setupCanvas as undefined anyway, so I'm not sure. –  tjm Dec 18 '10 at 16:27
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.