如何实现 html2canvas 中 x-offset 和 Y-offset - Crop feature

[momtboy]

https://html2canvas.hertzen.com/configuration

如何才能实现 html2canvas 中的x y轴上的位置偏移呢

[tinchox5]

Is the purpose of this feature to crop the element?

[momtboy]

Is the purpose of this feature to crop the element?

是的

[tinchox5]

Good! Ok let me see if it could be added in the snapDOM core or delegated to a custom plugin.

[tarwin]

I needed cropping myself. Ended up just sending the PNG through this:

  async function cropImageToPng(
    image: HTMLImageElement,
    width: number,
    height: number,
    scale: number = 1
  ): Promise<string> {
    // Create offscreen canvas with final output size
    const canvas = new OffscreenCanvas(width, height);
    const ctx = canvas.getContext('2d')!;

    // Calculate crop size based on scale
    const cropWidth = width * scale;
    const cropHeight = height * scale;

    // Draw cropped portion from top-left (0,0) of source image, scaled down to fit canvas
    ctx.drawImage(
      image,
      0,
      0,
      cropWidth,
      cropHeight, // Source rectangle (larger crop area)
      0,
      0,
      width,
      height // Destination rectangle (scaled down to output size)
    );

    // Convert to PNG blob
    const blob = await canvas.convertToBlob({ type: 'image/png' });

    // Convert blob to data URL
    return new Promise<string>((resolve) => {
      const reader = new FileReader();
      reader.onload = () => resolve(reader.result as string);
      reader.readAsDataURL(blob);
    });
  }