p5.js如何将let url的外部链接替换为本地图片资源链接

前置准备 #

先整理本地项目目录结构，所有资源全部本地化，不留任何外部链接：

your-project/
├─ index.html
├─ sketch.js （你的p5业务代码）
├─ p5.min.js （下载p5.js库文件到本地，不要用CDN外链）
└─ assets/
   ├─ your-image.png （你需要用到的png/jpg素材图）
   └─ HappyMonsters.ttf （下载原来外链加载的字体文件到本地）

代码修改说明 #

你原有代码存在一个逻辑问题：createPalette函数是专门解析coolors.co调色板链接后缀取色值的，不支持直接传入图片链接/路径，如果要满足无外链要求，直接把调色板色值写在代码里最稳妥，同时用loadImage加载本地图片、loadFont加载本地字体即可，不需要保留任何外部url。

修改完成的全量无外链代码 #

// 直接定义调色板色值，无需依赖外部链接解析
let palette = ['#3a2e39', '#1e555c', '#f4d8cd', '#edb183', '#f15152'];
let font;
let localImg; // 存储本地加载的图片素材

function preload() {
    // 加载本地字体，替换原外链
    font = loadFont("./assets/HappyMonsters.ttf");
    // 加载本地图片，路径替换成你自己的图片相对路径
    localImg = loadImage("./assets/your-image.png");
}

function setup() {
    createCanvas(1112, 834);
    colorMode(HSB, 360, 100, 100, 100);
    angleMode(DEGREES);
    // 转换色值为p5颜色对象
    palette = palette.map(hex => color(hex));
    background(10);
    // 若需要绘制本地图片，直接调用 image(localImg, x坐标, y坐标) 即可
}

function draw() {
    let offset = 100;
    let margin = 0;
    let cells = 1;
    let d = (width - offset * 2 - margin * (cells - 1)) / cells;
    for (let j = 0; j < cells; j++) {
        for (let i = 0; i < cells; i++) {
            let x = offset + i * (d + margin) + d / 2;
            let y = offset + j * (d + margin) + d / 2;
            drawFancyShape(x, y, d, palette.concat());
        }
    }
    frameRate(0.5);
    noLoop();
}

function drawFancyShape(x, y, d, colors, char = String.fromCodePoint(65 + int(random(26)))) {
    let g = createGraphics(d, d);
    let g2 = createGraphics(d, d);
    colors = shuffle(colors);
    let c0 = colors[0];
    colors.splice(0, 1);
    let ratio = 0.2;
    let xStep, yStep;
    for (let y = 0; y < g.height; y += yStep) {
        yStep = random(ratio, 1 - ratio) * g.height / 2;
        if (y + yStep > g.height) yStep = g.height - y;
        if (g.height - y - yStep < g.height / 100) yStep = g.height - y;
        for (let x = 0; x < g.width; x += xStep) {
            xStep = random(ratio, 1 - ratio) * g.width / 2;
            if (x + xStep > g.width) xStep = g.width - x;
            if (g.width - x - xStep < g.width / 100) xStep = g.width - x;
            let r = [];
            for (let i = 0; i < 4; i++) {
                r.push(int(random(5)) * max(xStep, yStep) / 4);
            }
            g.rectMode(CENTER);
            g.fill(random(colors));
            g.noStroke();
            g.rect(x + xStep / 2, y + yStep / 2, xStep - 2, yStep - 2, r[0], r[1], r[2], r[3]);
        }
    }
    g2.textSize(g.width * 0.6);
    g2.textAlign(CENTER, CENTER);
    g2.textFont(font)
    g2.textStyle(BOLD);
    g2.fill(c0);
    g2.text(char, g.width / 2, g.height / 2 - g.height / 8);

    let g_tmp = g.get();
    let g2_tmp = g2.get();
    g_tmp.mask(g2_tmp);
    drawingContext.shadowColor = color(0, 0, 0, 33);
    drawingContext.shadowBlur = d / 10;

    push();
    translate(x, y);
    imageMode(CENTER);
    let scl = 1.1;
    image(g2, 0, 0, g2.width * scl, g2.height * scl);
    image(g_tmp, 0, 0, g_tmp.width * scl, g_tmp.height * scl);
    pop();
}

// 保存图片逻辑无需修改
let lapse = 0;
function mousePressed(){
  if (millis() - lapse > 400){
    save("img_" + month() + '-' + day() + '_' + hour() + '-' + minute() + '-' + second() + ".jpg");
    lapse = millis();
  }
}

注意事项 #

• 所有本地资源统一使用相对路径引用，不要写本地磁盘绝对路径，否则上传到平台后会出现资源404
• index.html中引用p5.js时，路径替换为本地的./p5.min.js，不要使用任何CDN外链
• 如果需要从本地图片中提取调色板，可以在setup()中图片加载完成后，通过localImg.get(x,y)方法采样图片像素色值生成调色板，无需额外依赖
• 上传时把整个项目文件夹（包含html、js、assets目录下所有资源）一起打包上传，不要只传单独的js文件

内容的提问来源于stack exchange，提问作者Ericonezs