Canvas图片加载失败及裁剪功能无响应问题求助

Hey there! Let's work through your image clipping issue step by step— I spotted a few small but critical bugs that are causing your canvas to fail loading the image and your button to do nothing. Here's what's going wrong and how to fix it:

1. Fix the Canvas Height Mismatch #

In your start() function, you set the canvas height to img.width / 2 instead of img.height / 2. This misalignment means your canvas won't match the image's aspect ratio, leading to incorrect drawing or no visible image at all.

Corrected line in start():

ch = canvas.height = img.height / 2;

2. Resolve Cross-Origin Restrictions #

The image URL you're using might have cross-origin resource sharing (CORS) restrictions. Even with img.crossOrigin = "anonymous", if the server doesn't send the right CORS headers, browsers block access to the image data— which breaks getImageData() (used when you click the button).

For testing, either:

• Use a local image file, or
• Switch to an image from a service that allows CORS, or
• Convert the image to a base64 string and embed it directly in your code.

3. Add Error Handling for Image Loading #

To debug if your image is failing to load, add an onerror handler to your image object. This will tell you if the image URL is broken or blocked:

img.onerror = function() {
  console.error("Oops! Failed to load the image. Check the URL or CORS settings.");
};

4. Ensure the Click Handler Works (Fallback to Vanilla JS if Needed) #

If jQuery isn't loading properly (e.g., the CDN link is down), your button click event won't bind. You can replace the jQuery click handler with vanilla JavaScript to avoid relying on jQuery:

document.getElementById("unbox").addEventListener("click", function() {
  var imgData = ctx.getImageData(0, 0, cw, ch);
  var data = imgData.data;
  clipBox(data);
});

Full Corrected Code #

Here's the updated code with all fixes applied:

HTML

<script type="text/javascript" src="https://code.jquery.com/jquery.min.js"></script>
<button id="unbox">Clip next sub-image</button><br>
<canvas id="canvas" width=300 height=150></canvas><br>
<h4>Below are images clipped from the canvas above.</h4><br>
<div id="clips"></div>

CSS

body { background-color: ivory; }
canvas { border: 1px solid red; }
#clips { border: 1px solid blue; padding: 5px; }
img { margin: 3px; }

JavaScript

$(function() {
  var canvas = document.getElementById("canvas");
  var ctx = canvas.getContext("2d");
  var cw, ch;

  // Background definition
  var isTransparent = false;
  var bkColor = { r: 255, g: 255, b: 255 };
  var bkFillColor = "rgb(" + bkColor.r + "," + bkColor.g + "," + bkColor.b + ")";

  // Load test image (replace with a CORS-friendly or local image)
  var img = new Image();
  img.crossOrigin = "anonymous";
  img.onload = start;
  img.onerror = function() {
    console.error("Failed to load image! Check URL/CORS.");
  };
  // Replace this URL with your own CORS-compliant image or local path
  img.src = "https://example.com/your-image.png";

  function start() {
    // Fix: Use img.height for canvas height
    cw = canvas.width = img.width / 2;
    ch = canvas.height = img.height / 2;
    ctx.drawImage(img, 0, 0, cw, ch);
  }

  function clipBox(data) {
    var pos = findEdge(data);
    if (!pos.valid) {
      return;
    }
    var bb = findBoundary(pos, data);
    clipToImage(bb.x, bb.y, bb.width, bb.height);
    if (isTransparent) {
      ctx.clearRect(bb.x - 2, bb.y - 2, bb.width + 4, bb.height + 4);
    } else {
      ctx.fillStyle = bkFillColor;
      ctx.fillRect(bb.x - 2, bb.y - 2, bb.width + 4, bb.height + 4);
    }
  }

  function xyIsInImage(data, x, y) {
    var start = (y * cw + x) * 4;
    if (isTransparent) {
      return (data[start + 3] > 25);
    } else {
      var r = data[start + 0];
      var g = data[start + 1];
      var b = data[start + 2];
      var a = data[start + 3];
      var deltaR = Math.abs(bkColor.r - r);
      var deltaG = Math.abs(bkColor.g - g);
      var deltaB = Math.abs(bkColor.b - b);
      return (!(deltaR < 5 && deltaG < 5 && deltaB < 5 && a > 25));
    }
  }

  function findEdge(data) {
    for (var y = 0; y < ch; y++) {
      for (var x = 0; x < cw; x++) {
        if (xyIsInImage(data, x, y)) {
          return ({ x: x, y: y, valid: true });
        }
      }
    }
    return ({ x: -100, y: -100, valid: false });
  }

  function findBoundary(pos, data) {
    var x0 = x1 = pos.x;
    var y0 = y1 = pos.y;
    while (y1 <= ch && xyIsInImage(data, x1, y1)) {
      y1++;
    }
    var x2 = x1;
    var y2 = y1 - 1;
    while (x2 <= cw && xyIsInImage(data, x2, y2)) {
      x2++;
    }
    return ({ x: x0, y: y0, width: x2 - x0, height: y2 - y0 + 1 });
  }

  function clipToImage(x, y, w, h) {
    if (w < 3 || h < 3) {
      return;
    }
    var tempCanvas = document.createElement("canvas");
    var tempCtx = tempCanvas.getContext("2d");
    tempCanvas.width = w;
    tempCanvas.height = h;
    tempCtx.drawImage(canvas, x, y, w, h, 0, 0, w, h);
    var image = new Image();
    image.width = w;
    image.height = h;
    image.src = tempCanvas.toDataURL();
    $("#clips").append(image);
  }

  // jQuery click handler (or use vanilla JS as fallback)
  $("#unbox").click(function() {
    try {
      var imgData = ctx.getImageData(0, 0, cw, ch);
      var data = imgData.data;
      clipBox(data);
    } catch (e) {
      console.error("Error clipping image:", e);
      alert("Failed to clip image— check console for details (likely CORS issue).");
    }
  });
});

Just swap out the image URL with one that works for you, and you should see the canvas load the image and the button start clipping sub-images as expected!

内容的提问来源于stack exchange，提问作者T.PC