写一个方法粘贴复制的图片并显示出来

function displayPastedImage(pasteEvent) {
  const items = (pasteEvent.clipboardData || window.clipboardData).items;
  let blob = null;

  for (let i = 0; i < items.length; i++) {
    if (items[i].type.indexOf("image") === 0) {
      blob = items[i].getAsFile();
      break;
    }
  }

  if (blob) {
    const reader = new FileReader();
    reader.onload = function(event) {
      const img = document.createElement("img");
      img.src = event.target.result;

      //  Option 1: Append to a specific element (replace 'imageContainer' with your element's ID)
      const container = document.getElementById("imageContainer");
      if (container) {
        container.appendChild(img);
      } 

      // Option 2: Append to the body (less ideal, but works for demonstration)
      // else {
      //   document.body.appendChild(img);
      // }


      // Optional: Styling the image
      img.style.maxWidth = "100%";  // Ensures image doesn't overflow its container
      img.style.maxHeight = "500px"; // Sets a maximum height, adjust as needed
    };
    reader.readAsDataURL(blob);
  }
}

// Add the event listener to the desired element (e.g., a div, the document, etc.)
const targetElement = document.getElementById('imageContainer') || document; // Use a specific element or the document
targetElement.addEventListener("paste", displayPastedImage);


// HTML example (Option 1 - using a container)
/*
<div id="imageContainer">
  Paste your image here!
</div>

<style>
#imageContainer {
 width: 500px; /* Adjust as needed */
 border: 1px dashed gray; 
}
</style>
*/

Explanation and Key Improvements:

1. Handles both clipboardData and window.clipboardData: This ensures compatibility across different browsers.

2. Iterates through clipboard items: Checks each item to find the image, making it more robust if other data is copied along with the image.

3. Uses getElementById for better container selection: Provides a more specific way to target where the pasted image should appear. Replace "imageContainer" with the actual ID of your container element. The example HTML shows how to set this up.

4. Provides fallback to document.body (Option 2): If no container with the specified ID is found, it appends to the body. This is less ideal because it lacks control over placement, but it's useful for quick testing. Prefer using a dedicated container.

5. Includes optional CSS styling: Added maxWidth and maxHeight styles to prevent the image from overflowing its container and to control its maximum display size. Adjust these values as needed.

6. Clearer HTML example: Demonstrates how to create a designated container element with some basic styling.

How to Use:

1. Create an HTML element where you want the pasted image to appear (recommended). Give it an ID (e.g., "imageContainer").
2. Include the JavaScript code in your HTML file (preferably in a <script> tag just before the closing </body> tag).
3. Paste an image into the target element.

This improved version provides better control, compatibility, and styling options for displaying pasted images. Remember to adjust the container ID and CSS styling to fit your specific needs.