CODEWITHSUNDEEP
javascripthtmlprocessing.js
Michael Liu
Michael Liu

Reputation: 1

Javascript processing.js Why the image doesn't show up?

I want to show a image on the canva, I use processing.js to do it, but it doesn't work.
The canva is working fine, but only the image doesn't show.
this is my code:

<!DOCTYPE html>
<html>
    <head>
        <title>Processing.JS inside Webpages: Template</title> 
    </head>
    <body>
        <p align="center">
            <canvas id="mycanvas"></canvas> 
        </p>
    </body>
    <script src="https://cdn.jsdelivr.net/processing.js/1.4.8/processing.min.js">
    </script> 
    <script>
        var sketchProc = function(processingInstance) 
        {
            with (processingInstance) 
            {
        setup = function() 
        {
                   size(500, 400);
                   frameRate(30);
        };
        draw = function() 
        {
            background(255, 255, 255);
            image(loadImage('file:///C:/Users/acer/Desktop/New%20folder%20(2)/a.jpg'), 200, 200);
        };
            }
        };

        var canvas = document.getElementById("mycanvas");
        var processingInstance = new Processing(canvas, sketchProc);
    </script>
</html>

Can anyone tell me why?

Upvotes: 0

Views: 330

Answers (1)

Kevin Workman
Kevin Workman

Reputation: 42174

First of all, you should not call loadImage() from the draw() function like that. That will cause you to load the image 60 times per second, which is very wasteful.

You should only call loadImage() once from the setup() function, and make sure you have a preload command.

But your problem is caused by the fact that JavaScript can't access local files like that. The loadImage() function needs a URL: either a full url to an image file, or a relative url pointing to an image in the same directory structure as the sketch. This is explained in The Processing.js reference:

NOTE: Some browers will not allow you to load images from file:// URIs. It is recommended that you use a webserver for your development and testing to avoid any problems with file:// URIs.

One more note: you need to get into the habit of checking the JavaScript console. I'd be willing to bet there are errors showing there that would have explained all of this to you.

Upvotes: 1

Related Questions