feat: 图片裁剪组件 & 头像上传

apps/web-antd/src/utils/file/base64Conver.ts

@@ -0,0 +1,46 @@
+/**
+ * @description: base64 to blob
+ */
+export function dataURLtoBlob(base64Buf: string): Blob {
+  const arr = base64Buf.split(',');
+  const typeItem = arr[0];
+  // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+  const mime = typeItem!.match(/:(.*?);/)![1];
+  // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+  const bstr = window.atob(arr[1]!);
+  let n = bstr.length;
+  const u8arr = new Uint8Array(n);
+  while (n--) {
+    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+    u8arr[n] = bstr.codePointAt(n)!;
+  }
+  return new Blob([u8arr], { type: mime });
+}
+
+/**
+ * img url to base64
+ * @param url
+ */
+export function urlToBase64(url: string, mineType?: string): Promise<string> {
+  return new Promise((resolve, reject) => {
+    let canvas = document.createElement('CANVAS') as HTMLCanvasElement | null;
+    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+    const ctx = canvas!.getContext('2d');
+
+    const img = new Image();
+    img.crossOrigin = '';
+    img.addEventListener('load', () => {
+      if (!canvas || !ctx) {
+        // eslint-disable-next-line prefer-promise-reject-errors
+        return reject();
+      }
+      canvas.height = img.height;
+      canvas.width = img.width;
+      ctx.drawImage(img, 0, 0);
+      const dataURL = canvas.toDataURL(mineType || 'image/png');
+      canvas = null;
+      resolve(dataURL);
+    });
+    img.src = url;
+  });
+}

apps/web-antd/src/utils/file/download.ts

@@ -0,0 +1,125 @@
+import { openWindow } from '..';
+import { dataURLtoBlob, urlToBase64 } from './base64Conver';
+
+export function downloadExcelFile(
+  data: BlobPart,
+  filename: string,
+  withRandomName = true,
+) {
+  let realFileName = filename;
+  if (withRandomName) {
+    realFileName = `${filename}-${Date.now()}.xlsx`;
+  }
+  downloadByData(data, realFileName);
+}
+
+/**
+ * Download online pictures
+ * @param url
+ * @param filename
+ * @param mime
+ * @param bom
+ */
+export function downloadByOnlineUrl(
+  url: string,
+  filename: string,
+  mime?: string,
+  bom?: BlobPart,
+) {
+  urlToBase64(url).then((base64) => {
+    downloadByBase64(base64, filename, mime, bom);
+  });
+}
+
+/**
+ * Download pictures based on base64
+ * @param buf
+ * @param filename
+ * @param mime
+ * @param bom
+ */
+export function downloadByBase64(
+  buf: string,
+  filename: string,
+  mime?: string,
+  bom?: BlobPart,
+) {
+  const base64Buf = dataURLtoBlob(buf);
+  downloadByData(base64Buf, filename, mime, bom);
+}
+
+/**
+ * Download according to the background interface file stream
+ * @param {*} data
+ * @param {*} filename
+ * @param {*} mime
+ * @param {*} bom
+ */
+export function downloadByData(
+  data: BlobPart,
+  filename: string,
+  mime?: string,
+  bom?: BlobPart,
+) {
+  const blobData = bom === undefined ? [data] : [bom, data];
+  const blob = new Blob(blobData, { type: mime || 'application/octet-stream' });
+
+  const blobURL = window.URL.createObjectURL(blob);
+  const tempLink = document.createElement('a');
+  tempLink.style.display = 'none';
+  tempLink.href = blobURL;
+  tempLink.setAttribute('download', filename);
+  if (tempLink.download === undefined) {
+    tempLink.setAttribute('target', '_blank');
+  }
+  document.body.append(tempLink);
+  tempLink.click();
+  tempLink.remove();
+  window.URL.revokeObjectURL(blobURL);
+}
+
+/**
+ * Download file according to file address
+ * @param {*} sUrl
+ */
+export function downloadByUrl({
+  fileName,
+  target = '_blank',
+  url,
+}: {
+  fileName?: string;
+  target?: '_blank' | '_self';
+  url: string;
+}): boolean {
+  const isChrome = window.navigator.userAgent.toLowerCase().includes('chrome');
+  const isSafari = window.navigator.userAgent.toLowerCase().includes('safari');
+
+  if (/iP/.test(window.navigator.userAgent)) {
+    console.error('Your browser does not support download!');
+    return false;
+  }
+  if (isChrome || isSafari) {
+    const link = document.createElement('a');
+    link.href = url;
+    link.target = target;
+
+    if (link.download !== undefined) {
+      link.download =
+        // eslint-disable-next-line unicorn/prefer-string-slice
+        fileName || url.substring(url.lastIndexOf('/') + 1, url.length);
+    }
+
+    if (document.createEvent) {
+      const e = document.createEvent('MouseEvents');
+      e.initEvent('click', true, true);
+      link.dispatchEvent(e);
+      return true;
+    }
+  }
+  if (!url.includes('?')) {
+    url += '?download';
+  }
+
+  openWindow(url, { target });
+  return true;
+}