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

export const base64Crop = (srcW: number, srcH: number, base64: string, pixelCrop: Crop) => {
  return new Promise<string>((resolve) => {
    const canvas: HTMLCanvasElement = document.createElement('canvas');
    canvas.width = pixelCrop.width;
    canvas.height = pixelCrop.height;
    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;
      const pixelRatio = window.devicePixelRatio;

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

      ctx.setTransform(pixelRatio, 0, 0, pixelRatio, 0, 0);
      ctx.imageSmoothingQuality = 'high';
      ctx.drawImage(image, 0, 0, srcW, srcH, 0, 0, srcW, srcH);
      let s = canvas.toDataURL('image/png');
      console.info('s', s.slice(-30));
      // return s;
      resolve(s);
    };
  });
};