Canvas可缩放与获取真实像素坐标实现方案咨询

Hey there! I've got a complete solution for your large drone map Canvas needs—including smooth zoom, drag functionality, and accurate real-pixel coordinate tracking. Let's dive in:

First, here's the full working code (I've updated your original code with all the required features):

<canvas id="canvas1" width="800" height="600"></canvas>

<script>
let canvas = document.getElementById('canvas1');
let ctx = canvas.getContext('2d');
let img = new Image();

// Core state variables for zoom/drag
let scale = 1;
let offsetX = 0;
let offsetY = 0;
let isDragging = false;
let lastX, lastY;
let originalImgWidth, originalImgHeight;

img.onload = function () {
  originalImgWidth = img.width;
  originalImgHeight = img.height;
  
  // Initial fit: scale image to fit canvas and center it
  scale = Math.min(canvas.width / originalImgWidth, canvas.height / originalImgHeight);
  offsetX = (canvas.width - originalImgWidth * scale) / 2;
  offsetY = (canvas.height - originalImgHeight * scale) / 2;
  
  drawImage();
};
// Replace with your actual image URL
img.src = "http://xxxx.com/xxx.png";

// Draw the image with current scale and offset
function drawImage() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  ctx.save();
  ctx.translate(offsetX, offsetY);
  ctx.scale(scale, scale);
  ctx.drawImage(img, 0, 0);
  ctx.restore();
}

// Zoom functionality (mouse wheel)
canvas.addEventListener('wheel', function (e) {
  e.preventDefault();
  
  // Get mouse position relative to canvas
  const rect = canvas.getBoundingClientRect();
  const mouseX = e.clientX - rect.left;
  const mouseY = e.clientY - rect.top;
  
  // Calculate original image coordinate under mouse before zoom
  const originalX = (mouseX - offsetX) / scale;
  const originalY = (mouseY - offsetY) / scale;
  
  // Adjust scale (10% change per wheel tick)
  const delta = e.deltaY > 0 ? 0.9 : 1.1;
  scale *= delta;
  
  // Limit scale range to prevent extreme zoom
  scale = Math.max(0.1, Math.min(scale, 5));
  
  // Update offset to keep mouse pointing at the same original pixel
  offsetX = mouseX - originalX * scale;
  offsetY = mouseY - originalY * scale;
  
  drawImage();
});

// Drag functionality
canvas.addEventListener('mousedown', function (e) {
  isDragging = true;
  const rect = canvas.getBoundingClientRect();
  lastX = e.clientX - rect.left;
  lastY = e.clientY - rect.top;
});

canvas.addEventListener('mousemove', function (e) {
  const rect = canvas.getBoundingClientRect();
  const currentX = e.clientX - rect.left;
  const currentY = e.clientY - rect.top;
  
  if (isDragging) {
    // Update offset based on mouse movement
    offsetX += currentX - lastX;
    offsetY += currentY - lastY;
    lastX = currentX;
    lastY = currentY;
    drawImage();
  }
  
  // Calculate and log real pixel coordinates
  const realX = (currentX - offsetX) / scale;
  const realY = (currentY - offsetY) / scale;
  
  let coord = `真实坐标: x=${Math.round(realX)}, y=${Math.round(realY)}`;
  
  // Check if coordinates are within original image bounds
  if (realX < 0 || realX >= originalImgWidth || realY < 0 || realY >= originalImgHeight) {
    coord += " (超出原图范围)";
  } else {
    // Get real pixel data (requires same-origin image for CORS compliance)
    const tempCtx = document.createElement('canvas').getContext('2d');
    tempCtx.canvas.width = originalImgWidth;
    tempCtx.canvas.height = originalImgHeight;
    tempCtx.drawImage(img, 0, 0);
    const pixelData = tempCtx.getImageData(realX, realY, 1, 1).data;
    
    if (pixelData[3] === 0) {
      coord += " (透明像素)";
    } else {
      const hexColor = `#${((1 << 24) + (pixelData[0] << 16) + (pixelData[1] << 8) + pixelData[2]).toString(16).slice(1)}`;
      coord += ` | 颜色: ${hexColor}`;
    }
  }
  
  console.log(coord);
});

canvas.addEventListener('mouseup', () => isDragging = false);
canvas.addEventListener('mouseleave', () => isDragging = false);
</script>

Key Feature Breakdown #

1. Initial Image Fit #

• Automatically scales your large drone map to fit within the canvas on load
• Centers the image by default for better initial visibility

2. Smooth Zoom #

• Use your mouse wheel to zoom in/out (10% adjustment per tick)
• Zoom is centered on your mouse cursor—so the pixel you're pointing at stays under the cursor during zoom
• Includes scale limits (0.1x to 5x) to prevent unusable zoom levels

3. Drag Navigation #

• Click and drag the image to pan around the canvas
• Drag stops automatically when you release the mouse or move it outside the canvas

4. Real Pixel Coordinate Calculation #

• Converts the canvas-based mouse position to the original image's true pixel coordinates using this formula:

  const realX = (currentX - offsetX) / scale;
  const realY = (currentY - offsetY) / scale;
  

• Rounds coordinates to integers (since pixels are whole units) and checks if they're within the original image bounds

5. Real Pixel Data Access #

• Creates a temporary canvas to draw the original image, allowing us to fetch pixel data using the real coordinates
• Displays HEX color values for non-transparent pixels, and flags transparent areas

Important Notes #

• CORS Restriction: If your image is hosted on a different domain, you'll need to ensure the server sends proper CORS headers—otherwise, the browser will block pixel data access for security reasons
• Canvas Size: Adjust the width and height attributes of the <canvas> element to match your desired display area
• Performance: For extremely large images like yours (8916x6888), you might want to add requestAnimationFrame to the drawImage function for smoother rendering, or lower the maximum zoom limit if you notice lag

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