Question

我想在canva上显示图像，我使用processing.js来做，但它不起作用。
canva工作正常，但只有图像没有显示这是我的代码：

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

谁能告诉我为什么？

Answer 1

首先，您不应该像这样从loadImage()函数调用draw()。这将导致您每秒加载图像60次，这非常浪费。

您应该只从loadImage()函数调用setup() 一次，并确保您有预加载命令。

但是你的问题是由JavaScript无法访问这样的本地文件引起的。 loadImage()函数需要一个URL：要么是图像文件的完整URL，要么是指向与草图相同的目录结构中的图像的相对URL。这在The Processing.js reference：

中有解释

注意：有些浏览器不允许您从file：// URIs加载图片。建议您使用Web服务器进行开发和测试，以避免file：// URIs出现任何问题。

还有一点需要注意：你需要养成检查the JavaScript console的习惯。我愿意打赌那里有错误显示会解释所有这些。

Javascript processing.js为什么图像不显示？

1 个答案: