Javascript loadImage未加载图像

Question

我正在复制 Louis Hoebregts 的精彩 Flowing Image on code pen，并尝试将其修改为我自己的艺术。

更新：根据评论员的建议，我查看了 Chrome 开发控制台，它抱怨：

Fetch API cannot load file:///C:/Users/Sam/Downloads/flowing-imagehow-to/flowing-imagehow-to/dist/rowling-dark-bg.jpg. URL scheme "file" is not supported.

我尝试从图像文件名中删除破折号，但无济于事。

如果我使用抱怨的网址

Access to fetch at 'https://pottertour.co.uk/blog/images/rowling/rowling-dark-bg.jpg' from origin 'null' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

但无论如何我想要一个相对文件路径，我想在本地加载图像。任何帮助指出我需要做什么的帮助。

JAVASCRIPT：

let img;
const detail = 6;
let particles = [];
let grid = [];
let particleImage;
let ctx;
function preload() {
  img = loadImage('**https://pottertour.co.uk/blog/images/rowling/rowling-dark-bg.jpg**');
}

class Particle {
  constructor (x, y) {
    this.x = x || random(width);
    this.y = y || random(height);
    this.prevX = this.x;
    this.speed = 0;
    this.v = random(0, 0.7);
  }
  
  update (speed) {
    if (grid.length) {
      this.speed = grid[floor(this.y / detail)][floor(this.x / detail)] * 0.97;
    }
    this.x += (1 - this.speed) * 3 + this.v;
    
    if (this.x > width) {
      this.x = 0;
    }
  }
  
  draw () {
    image(particleImage, this.x, this.y);
  }
}

/* ====== STEP 1 ====== */
function step1 () {
  clear();
  noLoop();
  image(img, 0, 0, width, height);
  noFill();
  stroke(120);
  strokeWeight(1);
  strokeCap(SQUARE);
  ctx.globalAlpha = 1;
  for (let y = 0; y < height; y+=detail) {
    for (let x = 0; x < width; x+=detail) {
      rect(x + 0.5, y + 0.5, detail, detail);
    }
  }
}
...
function setup () {
  const canvas = createCanvas(100,100);
  ctx = canvas.drawingContext;
  
  pixelDensity(1);
  
  particleImage = createGraphics(8, 8);
  particleImage.fill(255);
  particleImage.noStroke();
  particleImage.circle(4, 4, 4);
  
  windowResized();
  document.querySelector('#step').addEventListener('input', () => {
    if (window['goToStep' + step.value]) {
      window['goToStep' + step.value]();
    }
    draw();
  });
}

function windowResized () {
  const imgRatio = img.width/img.height;
  if (windowWidth/windowHeight > imgRatio) {
    resizeCanvas(floor(windowHeight * imgRatio), floor(windowHeight));
  } else {
    resizeCanvas(floor(windowWidth), floor(windowWidth / imgRatio));
  }
  noiseSeed(random(100));
  if (window['goToStep' + step.value]) {
    window['goToStep' + step.value]();
  }
  draw();
}

const texts = document.querySelectorAll('section p');
function draw () {
  window['step' + step.value]();
  
  texts.forEach(text => text.style.display = 'none');
  texts[step.value - 1].style.display = 'block';
}

我尝试下载我的 fork 并在我的计算机上运行它，假设 Codepen 不喜欢外部托管的图像文件，但它不起作用。

我认为问题出在上面的 Javascript 中。可能在设置功能中？有什么东西对加载的图像尺寸很挑剔吗？我该如何解决？

抱歉，我的 Javascript 知识目前很牛，我只是 hack，Javascript 对我来说是应用程序开发的假期。

HTML：

<input type="range" min="1" max="6" step="1" id="step" value="1">
<section>
  <p>Draw an image and divide it into a grid</p>
  <p>Get the brightness of every cell</p>
  <p>Draw particles moving from left to right</p>
  <p>Update each particle's speed based on the brightness of its position</p>
  <p>Fade each particle based on its speed</p>
  <p>Do not clear your scene on each frame, to let the particles fade out</p>
</section>

CSS

body {
  margin: 0;
  overflow: hidden;
  display: flex;
  height: 100vh;
  background: black;
}
canvas {
  margin: auto;
  touch-action: none;
}

@mixin track {
  box-sizing: border-box;
  height: 6px;
    background: #fff;
  -webkit-appearance: none;
  appearance: none;
}

@mixin thumb {
  box-sizing: border-box;
    width: 30px;
  height: 30px;
    border-radius: 50%;
    background: #fff;
  border: 2px solid black;
  -webkit-appearance: none;
  appearance: none;
  cursor: grab;
}

input {
  position: fixed;
  left: 50%;
  bottom: 20px;
  transform: translateX(-50%);
  width: 80%;
  height: 34px;
  max-width: 400px;
  background: transparent;
  -webkit-appearance: none;
  appearance: none;
  &:active {
    cursor: grabbing;
  }
  &::-webkit-slider-runnable-track {@include track }
    &::-moz-range-track { @include track }
    &::-ms-track { @include track }
  
  &::-webkit-slider-thumb {margin-top: -12px;@include thumb}
    &::-moz-range-thumb { @include thumb }
  &::-ms-thumb {margin-top:0px;@include thumb}
}

section {
  box-sizing: border-box;
  font-size: 30px;
  color: white;
  position: fixed;
  left: 0;
  top: 20px;
  width: 100%;
  text-align: center;
  padding: 10px 10%;
  z-index: 10;
  pointer-events: none;
  text-shadow: 0 0 3px black, 0 0 4px black, 0 0 5px black;
  background: rgba(0, 0, 0, 0.7);
  p {
    margin: 0;
  }
  @media (max-width: 500px) {
    font-size: 24px;
  }
}

Answer 1

可以使用Chrome的开发者模式确认是否有异常，调试js。