P5.js 不适用于 Safari，控制台中没有错误 更新：代码片段的一个版本，一旦有可用图像就会开始显示

编程问答 2022-04-28

问题描述

我为我正在构建的网站制作了一个简单的 p5.js 草图，其中一些功能在 safari/ios safari 上不起作用，但是在 chrome 上一切正常。控制台中没有错误。

'showAbout' 和 'hideAbout' 函数在 safari 上工作正常，但函数 'mousepressed' 和 draw 函数中的所有内容都不是。想知道我的代码中是否有任何错误，或者这是否是 safari 故障？

我将在下面粘贴我的代码。

var dogs = [];
var index;
var x;
var y;
var angle;
var about;
var button;
var canvas;
var exit;
var toggle = false;
var w = window.innerWidth;
var h = window.innerHeight;

function preload() {
  for(let i=0; i<11; i++) {       
      dogs[i] = loadImage(`Images/Batch/dog${i}.jpg`);
  }
  about = select('.about-container');
  about.style('display','none');
  }

function setup() {
  canvas = createCanvas(w,h);
  frameRate(5); 
  angleMode(degrees);
  button = select('.about-button-text');
  button.mousepressed(showAbout);
  exit = select('.exit');
  exit.mousepressed(hideAbout); 
}

function draw() {
  fill(255);
  textSize(25);
  angle = random(-45,45);
  rotate(angle);
  index = random(dogs);
  index.width = w/3;
  x = random(w);
  y = random(h);
  image(index,x,y);
  
}

function mousepressed() {
  

  if (toggle) {
      noLoop();
      toggle = false;
      
  } else {
      loop();
      toggle = true;
  
  }
}

function showAbout() {
  about.show();
}

function hideAbout() {
  about.hide();
}


function windowResized() {
  resizeCanvas(w,h);
}

解决方法

如果没有可重现的示例，很难 100% 确定，但似乎分配 width 对象的 p5.Image 属性会导致图像无法在 Safari 上显示（没有错误，在 Chrome 上工作正常）。一般来说，你不应该给 p5.js 对象的字段赋值。我在文档中没有看到任何内容表明这会得到支持。相反，您可能想要做的是在调用 image() 函数时指定维度：

// I've also taken the liberty of making the variables used here local
// to this function instead of being declared globally.
function draw() {
  fill(255);
  textSize(25);
  let angle = random(-45,45);
  rotate(angle);
  let img = random(dogs);
  // ***** This is broken in Safari,and not supported in general:
  // img.width =  w / 3;
  let x = random(w);
  let y = random(h);
  
  let aspect = img.height / img.width;
  
  // image(img,x,y);
  // ***** Instead of changing the width property of the p5.Image object you
  // should be specifying the width and height parameters of the image()
  // function:
  image(img,y,w / 3,(w / 3) * aspect);
}

可运行示例：

const imageUrls = [
  'https://cdn.glitch.com/0e291b8c-6059-4ca6-a0ae-84e67e1f94e7%2Forange-fish.jpg?v=1613865086898','https://cdn.glitch.com/0e291b8c-6059-4ca6-a0ae-84e67e1f94e7%2Fblue-fish.jpg?v=1613865087591','https://cdn.glitch.com/0e291b8c-6059-4ca6-a0ae-84e67e1f94e7%2Fgreen-fish.jpg?v=1613865088114','https://cdn.glitch.com/0e291b8c-6059-4ca6-a0ae-84e67e1f94e7%2Fpurple-fish.jpg?v=1613865090105','https://cdn.glitch.com/0e291b8c-6059-4ca6-a0ae-84e67e1f94e7%2Fwhite-fish.jpg?v=1613865093930','https://cdn.glitch.com/0e291b8c-6059-4ca6-a0ae-84e67e1f94e7%2Fblack-fish.jpg?v=1613983100022','https://cdn.glitch.com/0e291b8c-6059-4ca6-a0ae-84e67e1f94e7%2Fred-fish.png?v=1613983604942'
];

var dogs = [];
var about;
var button;
var canvas;
var exit;
var toggle = true;
var w = window.innerWidth;
var h = window.innerHeight;

function preload() {
  for(let i=0; i<imageUrls.length; i++) {
    let url = imageUrls[i];
    dogs[i] = loadImage(imageUrls[i]);
  }
  about = select('.about-container');
  about.style('display','none');
}

function setup() {
  canvas = createCanvas(w,h);
  frameRate(5); 
  angleMode(DEGREES);
  button = select('.about-button-text');
  button.mousePressed(showAbout);
  exit = select('.exit');
  exit.mousePressed(hideAbout); 
}

function draw() {
  fill(255);
  textSize(25);
  let angle = random(-45,45);
  rotate(angle);
  let img = random(dogs);
  //img.width = w/3;
  let x = random(w);
  let y = random(h);
  
  let aspect = img.height / img.width;
  
  //image(img,y);
  image(img,(w / 3) * aspect);
}

function mousePressed() {
  if (toggle) {
    print('toggle off');
    noLoop();
    toggle = false;
  } else {
    print('toggle on');
    loop();
    toggle = true;
  }
}

function showAbout() {
  about.show();
}

function hideAbout() {
  about.hide();
}

function windowResized() {
  print(`Resize ${w} x ${h}`);
  resizeCanvas(w,h);
}
<!DOCTYPE html>
<html lang="en">
  <head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.3.1/p5.js"></script>
    <meta charset="utf-8" />

  </head>
  <body>
    <button class="about-button-text">Show About</button>
    <div class="about-container">
      <p>About info...</p>
      <button class="exit">Exit</button>
    </div>
  </body>
</html>

更新：代码片段的一个版本，一旦有可用图像就会开始显示

const imageUrls = [
  'https://cdn.glitch.com/0e291b8c-6059-4ca6-a0ae-84e67e1f94e7%2Forange-fish.jpg?v=1613865086898','https://cdn.glitch.com/0e291b8c-6059-4ca6-a0ae-84e67e1f94e7%2Fred-fish.png?v=1613983604942'
];

var dogs = [];
var about;
var button;
var canvas;
var exit;
var toggle = true;
var w = window.innerWidth;
var h = window.innerHeight;

function setup() {
  canvas = createCanvas(w,h);
  frameRate(5);
  angleMode(DEGREES);

  for (let i = 0; i < imageUrls.length; i++) {
    loadImage(imageUrls[i],img => dogs.push(img));
  }

  about = select('.about-container');
  about.style('display','none');
  button = select('.about-button-text');
  button.mousePressed(showAbout);
  exit = select('.exit');
  exit.mousePressed(hideAbout);
}

function draw() {
  fill(255);
  textSize(25);
  let angle = random(-45,45);
  rotate(angle);
  if (dogs.length > 0) {
    let img = random(dogs);
    //img.width = w/3;
    let x = random(w);
    let y = random(h);

    let aspect = img.height / img.width;

    //image(img,y);
    image(img,(w / 3) * aspect);
  }
}

function mousePressed() {
  if (toggle) {
    print('toggle off');
    noLoop();
    toggle = false;
  } else {
    print('toggle on');
    loop();
    toggle = true;
  }
}

function showAbout() {
  about.show();
}

function hideAbout() {
  about.hide();
}

function windowResized() {
  print(`Resize ${w} x ${h}`);
  resizeCanvas(w,h);
}
<!DOCTYPE html>
<html lang="en">

<head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.3.1/p5.js"></script>
  <meta charset="utf-8" />

</head>

<body>
  <button class="about-button-text">Show About</button>
  <div class="about-container">
    <p>About info...</p>
    <button class="exit">Exit</button>
  </div>
</body>

</html>

consoleconsoleconsolejavascriptp5.jsprocessingprocessingprocessingsafari