如何在JavaScript中获取图像像素数据？——类Minecraft项目纹理图像素提取需求及问题

Great question! Let's break this down clearly:

Can you get pixel data from a sprite sheet without using Canvas? #

Short answer: No, there’s no native browser API that lets you read pixel data from an image directly without drawing it to a Canvas (or WebGL context) first.

This is due to browser security rules—image pixel data is considered sensitive content, and browsers restrict access to it unless the image is loaded in a context that enforces CORS (Cross-Origin Resource Sharing) policies. Canvas acts as that secure intermediary.

Why does your current Canvas solution fail sometimes? #

Your code works most of the time, but the occasional failures are almost certainly from two common issues:

1. Image loading timing: You’re trying to draw the image to Canvas before it finishes loading. Since image loading is asynchronous, drawImage will do nothing if the image isn’t ready, leaving your Canvas empty.
2. CORS restrictions: If your texture image is hosted on a different domain (or even loaded via file:// in some browsers) without proper CORS headers, getImageData will throw a security error and fail.

Fixing your Canvas solution (to make it work 100% of the time) #

Let’s adjust your code to handle these edge cases properly:

1. Wait for the image to fully load before processing #

Wrap your logic in the image’s load event to ensure the image data is ready:

// Single texture dimensions
const textureWidth = 16;
const textureHeight = 16;

// Grab the image element
const image = document.getElementById("texturesImage");

// Wait for the image to finish loading
image.addEventListener('load', () => {
  // Set up the texture canvas
  const tcanvas = document.getElementById("textures");
  const tctx = tcanvas.getContext("2d");
  
  // Match canvas size to the image's actual dimensions
  tcanvas.width = image.naturalWidth;
  tcanvas.height = image.naturalHeight;
  const imgWidth = image.naturalWidth;
  const imgHeight = image.naturalHeight;
  
  // Draw the full sprite sheet to the canvas
  tctx.drawImage(image, 0, 0);
  
  // Function to fetch texture data by block ID
  function getTextureData(blockID) {
    if (!Number.isInteger(blockID) || blockID < 0 || blockID > 15) {
      console.error(`${blockID} is not a valid ID.`);
      return false;
    }
    
    // Calculate the texture's position in the sprite sheet
    const texturesPerRow = imgWidth / textureWidth;
    const tx = (blockID % texturesPerRow) * textureWidth;
    const ty = Math.floor(blockID / texturesPerRow) * textureHeight;
    
    try {
      // Return the pixel data for the target texture
      return tctx.getImageData(tx, ty, textureWidth, textureHeight);
    } catch (err) {
      console.error("Failed to retrieve texture data:", err);
      return false;
    }
  }
  
  // Test the function
  console.log(getTextureData(13));
});

// Handle image load failures
image.addEventListener('error', () => {
  console.error("Error loading texture image—check your file path!");
});

2. Fix CORS issues (if applicable) #

If your texture image is from another domain:

• Ensure the server hosting the image sends the correct CORS headers (e.g., Access-Control-Allow-Origin: * or your specific domain)
• Add the crossorigin attribute to your image tag:

<img src="/BlockTextures.png" id="texturesImage" crossorigin="anonymous">

Note: If you’re testing locally with file://, use a local development server (like http-server or Live Server in VS Code) instead—browsers often restrict CORS for local files.

3. Hide the texture canvas (if you don’t want it visible) #

If you don’t want the orange canvas showing up on your page, hide it without breaking rendering:

#textures {
  position: absolute;
  top: -9999px;
  left: -9999px;
  /* Avoid display: none; some browsers skip rendering hidden canvases */
}

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