如何在P5js/JS中将文本颜色设置为与预加载图像颜色一致

实现思路 #

• 第一步：预加载目标图像，确保图像加载完成后再操作，避免像素读取失败。如果图像尺寸和画布尺寸不一致，建议先把图像缩放到和画布同大小，方便像素位置一一对应。
• 第二步：将450个文本字符按照你需要的布局排列在画布上，计算每个字符的锚点坐标（比如字符的中心位置或者左上角位置都可以，只要和取像素的位置对应即可）。
• 第三步：调用p5.js的loadPixels()方法加载图像的像素数据，根据每个字符的坐标，对应取出图像上相同坐标位置的像素RGBA值。
• 第四步：用取出的颜色值设置fill()，逐个绘制文本即可。如果追求更好的性能，可以先把所有字符的坐标、对应颜色提前算好，再统一绘制。

完整可运行代码示例 #

// 存储预加载的图像
let targetImg;
// 450个测试文本，可替换为自己的文本内容
let textContent = "这是用来测试的450个字符".repeat(18);
// 存储每个字符的位置和对应颜色
let charData = [];

function preload() {
  // 替换为你自己的图像路径
  targetImg = loadImage("your-image-path.jpg");
}

function setup() {
  createCanvas(800, 800);
  // 把图像缩放到和画布尺寸一致，方便像素对应
  targetImg.resize(width, height);
  // 加载图像像素数据
  targetImg.loadPixels();
  
  // 计算文本布局，这里用网格布局做示例，可替换为自己需要的排版规则
  textSize(16);
  textAlign(CENTER, CENTER);
  let cols = 25; // 25列18行刚好450个字符
  let rows = 18;
  let gapX = width / cols;
  let gapY = height / rows;
  
  let charIndex = 0;
  for (let y = 0; y < rows; y++) {
    for (let x = 0; x < cols; x++) {
      // 计算当前字符的中心坐标
      let posX = x * gapX + gapX / 2;
      let posY = y * gapY + gapY / 2;
      // 计算对应图像位置的像素索引，p5.js像素数组是rgba四个值为一组
      let pixelIndex = (floor(posY) * width + floor(posX)) * 4;
      let r = targetImg.pixels[pixelIndex];
      let g = targetImg.pixels[pixelIndex + 1];
      let b = targetImg.pixels[pixelIndex + 2];
      let a = targetImg.pixels[pixelIndex + 3];
      // 存储字符数据
      charData.push({
        char: textContent[charIndex],
        x: posX,
        y: posY,
        color: color(r, g, b, a)
      });
      charIndex++;
    }
  }
}

function draw() {
  background(255);
  // 逐个绘制字符，用对应位置的颜色填充
  for (let i = 0; i < charData.length; i++) {
    let item = charData[i];
    fill(item.color);
    noStroke();
    text(item.char, item.x, item.y);
  }
  // 只需要静态效果的话可以加noLoop()节省性能
  noLoop();
}

注意事项 #

• 如果你的文本排版不是规则网格，只要在计算每个字符坐标的时候对应取相同位置的像素颜色即可，核心逻辑不变。
• 跨域图像会导致像素读取失败，需要确保图像和项目在同域名下，本地测试的时候要开启本地服务器。
• 如果需要文本有透明度效果，直接读取像素的a通道值即可，代码里已经包含了alpha通道的处理。
• 如果文本是动态生成的，只要在更新文本的时候重新计算一次对应位置的颜色即可，不需要修改核心逻辑。

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