处理 - 徽标横幅未加载到网站上答案

【问题标题】：Processing - logo banner not loading on website处理 - 徽标横幅未加载到网站上
【发布时间】：2021-08-09 22:35:36
【问题描述】：

我将处理代码作为纯文本文件保存到 Visual Studio 代码中，我添加了 images/gradient.jpg 以及徽标。我将 img 代码替换为画布代码，但没有出现动画徽标。到目前为止，我已经尝试了所有方法，但没有任何效果。徽标只是没有出现。

@pjs preload="gradient.jpg,BRICKSxMORTAR_logo_transparentX.png";


PImage gradient;
PImage logo;




void setup(){
 size(792, 150);
 background(0);
 gradient = loadImage("gradient.jpg");
 logo = loadImage("BRICKSxMORTAR_logo_transparentX.png");
 }

void draw(){
  for(int i = 0; i < 10; i++){
  float x = random(width);
  //ellipse(x, 20, 300, 200);
  image(gradient,300,11);
  ellipse(x, 200, x, 300);
  image(logo,1,9);
  //ellipse(x, x, 30, 20);{




 }
}


    <canvas id="logo" data-processing-sources="BxM_animatedLogo.pde"></canvas>
</div>

【问题讨论】：

你见过别人的代码截图吗？请阅读Discourage screenshots of code and/or errors。不要发布代码的屏幕截图。粘贴代码。
请记住，Processing.js 不再是一个真正的项目，而且现在已经有 很长时间了：我在 2018 年 12 月将其存档。不要将它用于任何类型的新项目，实际上：甚至不要继续将它用于任何只有几百行的旧项目：只需将其重写为 p5js。

标签： visual-studio-code processing processing.js microsoft-file-explorer

【解决方案1】：

您似乎正试图将草图从 processing-java 转换为 processingjs（已弃用）。

这里使用 WayBackMachine 是 ProcessingJS loadImage() reference。以防万一，下面是描述：

将图像加载到 PImage 类型的变量中。四种类型的图像（ .gif、.jpg、.tga、.png) 图像可能会被加载。要正确加载， ~~图像必须位于当前草图的数据目录中~~， 必须使用 @pjs preload 指定路径来预加载图像图片。 在大多数情况下，在 setup() 中加载所有图片以预加载它们在程序开始时。在 draw() 中加载图片会减少程序的速度。您还可以从数据 URI 加载图像，例如作为 "data:image/jpg;base64,{base 64 编码数据块}" 不需要任何预加载。

filename 参数也可以是在线找到的文件的 URL。为了安全原因，网上找到的一个Processing sketch只能下载来自同一服务器的文件。

filename参数的扩展名用于确定图片类型。在图像文件名不以正确结尾的情况下扩展名，指定扩展名作为第二个参数 loadImage()，如本页第三个示例所示。

如果图片加载不成功，返回null值，错误消息将打印到控制台。错误信息不会停止程序，但是 null 值可能会导致 NullPointerException 如果您的代码不检查该值是否 loadImage() 返回的值为 null。

注意：某些浏览器不允许您从 file:// 加载图片 URI。建议您使用网络服务器进行开发并进行测试以避免 file:// URI 出现任何问题。

我已经用斜体强调了重要的部分，这里是一个示例 sn-ps：

// @pjs preload must be used to preload the image

/* @pjs preload="laDefense.jpg"; */

PImage b;

void setup() {

  b = loadImage("laDefense.jpg");

  noLoop();

}



void draw() {

  image(b, 0, 0);

}

希望，在您的情况下，只需添加 @pjs preload 评论：

/* @pjs preload="gradient.jpg,BRICKSxMORTAR_logo_transparentX.png"; */

PImage gradient;
PImage logo;

void setup() {
  size(792, 150);
  background(0);
  gradient = loadImage("gradient.jpg");
  logo = loadImage("BRICKSxMORTAR_logo_transparentX.png");
}

void draw() {
  for (int i = 0; i < 10; i++) {
    float x = random(width);
    image(gradient, 300, 11);
    ellipse(x, 200, x, 300);
    image(logo, 9, 11);
  }
}

我没有对此进行测试，但希望它有效。 source code indicates 它应该处理多个图像。

作为旁注，将来请将代码 sn-ps 发布为格式化文本。对于 HTML/CSS，在某些情况下，您可以使用 stackoverflow 的代码 JS/HTML/CSS sn-p 功能，或者如果它更简单/更灵活，请使用许多在线服务之一，例如 jsfiddle、codepen、glitch。 Sketchpad.cc 也可能有效。加载图像需要更长的时间（甚至可能在有数据计划的移动设备上花费更多的钱），而文本更轻，更容易运行/测试。总的来说，这会让其他人更容易支持你。

【讨论】：