react-konva中预旋转图片失效：为何指定代码无法正常工作？

Hey there! Let's break down why your current code isn't rotating the image, and walk through the right ways to get this done.

The Core Issue #

First off: the native Image (HTMLImageElement) object does not have a rotate() method at all. That method you're trying to call simply doesn't exist on it—you might be mixing it up with the rotate() method provided by a Canvas 2D context, which is a totally different tool.

On top of that, even if such a method existed, you're calling it immediately after setting src, but image loading is asynchronous. The image hasn't finished loading yet when you run bush1Image.rotate(90), so any operation on it at that point won't work as expected.

Fixes Based on Your Use Case #

Let's cover the two most common scenarios for rotating an image:

1. If You're Adding the Image to the DOM

Use CSS transform to handle rotation—it's the simplest way for images displayed directly in the page. Just make sure to wait for the image to load before making changes:

const bush1Image = new Image();
bush1Image.src = 'bush1.png';

// Wait for the image to finish loading first
bush1Image.onload = function() {
  // Add the image to your page
  document.body.appendChild(bush1Image);
  // Apply rotation with CSS transform
  bush1Image.style.transform = 'rotate(90deg)';
  // Optional: adjust transform origin if needed (default is center)
  // bush1Image.style.transformOrigin = 'top left';
};

2. If You're Drawing the Image on a Canvas

If you need to render a rotated version of the image onto a canvas, you'll use the Canvas 2D context's rotation capabilities. Here's how to do it properly:

const bush1Image = new Image();
bush1Image.src = 'bush1.png';

bush1Image.onload = function() {
  const canvas = document.getElementById('your-canvas-element');
  const ctx = canvas.getContext('2d');

  // Save the current context state so we can reset it later
  ctx.save();

  // Move the context origin to the point where we want to rotate around
  // (Here, we're using the center of the canvas as the rotation point)
  ctx.translate(canvas.width / 2, canvas.height / 2);
  // Rotate the context 90 degrees (note: uses radians, Math.PI/2 = 90°)
  ctx.rotate(Math.PI / 2);

  // Draw the image—we offset by half its width/height to center it after rotation
  ctx.drawImage(bush1Image, -bush1Image.width / 2, -bush1Image.height / 2);

  // Restore the original context state so future drawing isn't rotated
  ctx.restore();
};

Key Takeaway #

Always remember that image loading is asynchronous—always wrap any image manipulation in the onload callback to ensure the image is fully loaded before you work with it. And forget about calling rotate() directly on an Image object—it just doesn't exist!

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