processing.js 加载图像（）答案

【问题标题】：processing.js loadImage()processing.js 加载图像（）
【发布时间】：2016-08-02 21:21:26
【问题描述】：

我已经制作了一个 processing.js 网页，我用它来放置一个平台游戏，所以我已经计划好了代码。现在我只需要把它放在网页上。现在我可以将背景设置为红色，但是当我输入代码时，我意识到它没有绘制任何图像。我查了一下，processing.js 使用的图像方法与我正在做的非常不同。还是不行。

这是我在 HelloWeb.pde 文件中的 processing.js 代码：

    preload = 
"file:///E:/Extra%20Curricular/STEM%20Videogame/Art/BlackKingIdle.png";

//注意E盘是我的U盘。不知道会不会有效果？

    //AI Codes
    int wolfX = 310;
    int wolfY = 200;
    int wolfHealth = 50;

    //Health
    int kingHealth = 100;
    int dragon = 500;

    //LV design
    int floorHeight = 300;
    int lvlNum = 1;

    //movement (x)
    int maxSpeed = 6.25; 
    int xForce = 0;
    int kingXPos = 947.5;

    //movement (y)
    int kingYPos = floorHeight + 50;
    int yForce = -15;
    int jumping = false;


    void setup() {
        size(1895, 800);
        background(255, 0, 0);
    }

    void draw() {
        if (lvlNum != 0) {
         PImage kingIdle = loadImage("file:///E:/Extra%20Curricular/STEM%20Videogame/Art/BlackKingIdle.png")
      }
    };

还有 HTML：

<!DOCTYPE html>
  <html>
  <head>
      <title>Hello Web - Processing.js Test</title>
      <script src="processing.min.js"></script>
  </head>
  <body>
      <h1>Processing.js Test</h1>
      <p>This is my first Processing.js web-based sketch:</p>
     <canvas data-processing-sources="HelloWeb.pde" width="1895" height="800" style="border:4px solid"></canvas>
 </body>
 </html>

【问题讨论】：

标签： image processing.js

【解决方案1】：

您应该养成发布MCVE 的习惯。尝试将您的问题缩小到尽可能少的行。例如，此代码演示了您的问题：

/* @pjs preload="C:\\Users\\Kevin\\Desktop\\August 1, 2016\\cropped\\Sky4.JPG"; */
PImage myImage;

void setup(){
  size(200,200);
  myImage = loadImage("C:\\Users\\Kevin\\Desktop\\August 1, 2016\\cropped\\Sky4.JPG");
}

void draw(){
  image(myImage, 50,50, 100,100);
}

您还应该养成检查 JavaScript 控制台的习惯。在那里你会看到你得到的任何错误。如果您查看那里，您应该会看到一个错误，上面写着"(index):1 Not allowed to load local resource"。

这个错误说明了一切。即使您在本地运行该网页，也不允许您从网页访问本地文件。

您的 Processing.js 网页由本地网络服务器提供服务。处理会为您处理这个问题，这很好，但是该网络服务器只能访问您已导入到草图目录中的文件。通过处理编辑器中的草图菜单执行此操作，或者您可以手动将data 文件夹添加到草图目录，然后将图像放在那里。然后只需参考与草图相关的图像即可。

我的示例代码中有两行会发生变化：

/* @pjs preload="Sky4.JPG"; */
myImage = loadImage("Sky4.JPG");

如果您不想将图像放在您的草图目录中，那么您将不得不使用自己的网络服务器。您可以在本地运行一个，也可以将图像上传到图像主机并在代码中使用 url。

【讨论】：

@Marco 没问题。请注意，您可以接受（并赞成）对您有帮助的答案。查看您的问题历史记录，您似乎没有接受任何答案。