js 根据 base64 和图片 宽高 ，截取参数 裁减图片 并且返回 处理后的 base64 图片

参考来源 https://stackoverflow.com/questions/31193418/html5-canvas-todataurl-returns-blank

https://www.geeksforgeeks.org/how-to-crop-images-in-reactjs/

https://codesandbox.io/s/react-image-crop-demo-with-react-hooks-y831o?file=/src/App.tsx

// base64 根据 position 参数 裁减 返回 base64
export const base64Crop = (
  srcW: number,
  srcH: number,
  base64: string,
  pixelCrop: Crop,
  scale = 1,
  rotate = 0,
) => {
  return new Promise<string>((resolve) => {
    const canvas: HTMLCanvasElement = document.createElement('canvas');
    let image: HTMLImageElement = document.createElement('img');
    image.src = base64;
    image.width = srcW;
    image.height = srcH;
    image.onload = () => {
      const ctx = canvas.getContext('2d');
      const scaleX = 1;
      const scaleY = 1;
      // devicePixelRatio slightly increases sharpness on retina devices
      // at the expense of slightly slower render times and needing to
      // size the image back down if you want to download/upload and be
      // true to the images natural size.
      const pixelRatio = window.devicePixelRatio;
      // const pixelRatio = 1

      canvas.width = Math.floor(pixelCrop.width * scaleX * pixelRatio);
      canvas.height = Math.floor(pixelCrop.height * scaleY * pixelRatio);

      ctx.scale(pixelRatio, pixelRatio);
      ctx.imageSmoothingQuality = 'high';

      const cropX = pixelCrop.x * scaleX;
      const cropY = pixelCrop.y * scaleY;

      const TO_RADIANS = Math.PI / 180;
      const rotateRads = rotate * TO_RADIANS;
      const centerX = srcW / 2;
      const centerY = srcH / 2;

      ctx.save();

      // 5) Move the crop origin to the canvas origin (0,0)
      ctx.translate(-cropX, -cropY);
      // 4) Move the origin to the center of the original position
      ctx.translate(centerX, centerY);
      // 3) Rotate around the origin
      ctx.rotate(rotateRads);
      // 2) Scale the image
      ctx.scale(scale, scale);
      // 1) Move the center of the image to the origin (0,0)
      ctx.translate(-centerX, -centerY);
      ctx.drawImage(image, 0, 0, srcW, srcH, 0, 0, srcW, srcH);

      ctx.restore();
      let s = canvas.toDataURL('image/png');
      resolve(s);
    };
  });
};

补充 base64 图片 缩放

// base64 根据 长宽 缩放
export const base64Scale = (
base64: string,
srcWidth: number,
srcHeight: number,
scaleWidth: number,
scaleHeight: number,
type: string,
) => {
return new Promise((resolve) => {
const canvas: HTMLCanvasElement = document.createElement('canvas');
canvas.width = scaleWidth;
canvas.height = scaleHeight;
let image: HTMLImageElement = document.createElement('img');
image.src = base64;
image.onload = () => {
let ctx = canvas.getContext('2d');

  // Actual resizing
  ctx.drawImage(image, 0, 0, srcWidth, srcHeight, 0, 0, scaleWidth, scaleHeight);

  // Show resized image in preview element
  const s = canvas.toDataURL(type); // canvas.toDataURL('image/png')
  resolve(s);
};

});
};