🐛 fix: 修正构建的 bug

packages/image-gallery/src/utils/clipboard.ts

@@ -0,0 +1,19 @@
+/* istanbul ignore file */
+
+/**
+ * 利用 Clipboard 剪切板
+ * @param type
+ * @param blob
+ */
+export const copyToClipboard = async (type: string, blob: Blob) => {
+  const { state } = await navigator.permissions.query({
+    name: 'clipboard-write',
+  });
+
+  const isAllowed = state === 'granted';
+  if (navigator.clipboard && isAllowed) {
+    await navigator.clipboard.write([new ClipboardItem({ [type]: blob })]);
+  }
+
+  return isAllowed;
+};

packages/image-gallery/src/utils/helper.ts

@@ -0,0 +1,17 @@
+/* istanbul ignore file */
+
+/**
+ * 利用 Canvas 生成 png dataURL
+ * @param image
+ * @param scale 缩放
+ */
+export const getImageBase64 = (image: HTMLImageElement, scale = 8) => {
+  const canvas = document.getElementById('canvas') as HTMLCanvasElement;
+  canvas.width = image.width * scale;
+  canvas.height = image.height * scale;
+
+  const context = canvas.getContext('2d');
+  context?.drawImage(image, 0, 0);
+
+  return canvas.toDataURL('image/png');
+};

packages/image-gallery/src/utils/index.ts

@@ -0,0 +1,2 @@
+export * from './svg';
+export * from './png';

packages/image-gallery/src/utils.test.ts → packages/image-gallery/src/utils/png.test.ts

@@ -1,4 +1,4 @@
-import { copyPngFromSvg } from './utils';
+import { copyPngFromSvg } from './png';
 
 describe('copyPng', () => {
   it('初始值', async () => {

packages/image-gallery/src/utils/png.ts

@@ -0,0 +1,65 @@
+/* istanbul ignore file */
+
+import { message } from 'antd';
+import { getImageBase64 } from './helper';
+import { copyToClipboard } from './clipboard';
+
+/**
+ * 复制 Png 到剪切板
+ * @param url
+ */
+export const copyPngFromSvg = async (url: string) => {
+  const res = await fetch(url);
+  const svgBlob = await res.blob();
+  const svgUrl = URL.createObjectURL(svgBlob);
+
+  const image = new Image();
+  image.src = svgUrl;
+
+  image.onload = async () => {
+    const result = await fetch(getImageBase64(image, 1));
+    // 如果浏览器支持 navigator.clipboard 接口
+    // 就使用 write 接口
+    const isSuccess = await copyToClipboard('image/png', await result.blob());
+    // 不然就用降级方案
+    if (!isSuccess) {
+      // 创建 image 对象
+      const img = document.createElement('img');
+      img.src = getImageBase64(image);
+      img.contentEditable = 'true';
+      document.body.appendChild(img);
+
+      // 复制
+      const selection = window.getSelection();
+      const range = document.createRange();
+      range.selectNode(img);
+      selection?.removeAllRanges();
+      selection?.addRange(range);
+      document.execCommand('Copy');
+      img.remove();
+    }
+
+    message.success('🎉 复制成功!');
+  };
+};
+
+/**
+ * 下载 Png
+ * @param url
+ * @param title
+ */
+export const downloadPng = async (url: string, title: string) => {
+  const res = await fetch(url);
+  const svgBlob = await res.blob();
+  const svgUrl = URL.createObjectURL(svgBlob);
+
+  const image = new Image();
+  image.src = svgUrl;
+
+  image.onload = () => {
+    const a = document.createElement('a');
+    a.download = `${title}.png`;
+    a.href = getImageBase64(image);
+    a.click();
+  };
+};

packages/image-gallery/src/utils/svg.ts

@@ -0,0 +1,51 @@
+/* istanbul ignore file */
+
+// import { copyToClipboard } from './clipboard';
+import { message } from 'antd';
+
+/**
+ * 复制 SVG
+ * @param url
+ */
+export const copySVG = async (url: string) => {
+  const res = await fetch(url);
+  // const svgBlob = await res.text();
+  // console.log(svgBlob);
+  // 如果浏览器支持 navigator.clipboard 接口
+  // 就使用 write 接口
+  // const isSuccess = await copyToClipboard('text/plain', new Blob([svgBlob], { type: 'text/plain' }));
+
+  // if (!isSuccess) {
+  const svgString = await res.text();
+  const input = document.createElement('input');
+  document.body.appendChild(input);
+  input.setAttribute('value', svgString);
+  input.select();
+  document.execCommand('copy');
+  document.body.removeChild(input);
+  // }
+
+  message.success('🎉 复制成功!');
+};
+
+/**
+ * 下载 SVG
+ * @param url
+ * @param title
+ */
+export const downloadSVG = async (url: string, title: string) => {
+  const res = await fetch(url);
+  const svgBlob = await res.blob();
+
+  const filename = `${title}.svg`;
+
+  const a = document.createElement('a');
+  document.body.appendChild(a); // 兼容火狐，将a标签添加到body当中
+
+  a.href = URL.createObjectURL(svgBlob);
+
+  a.download = filename;
+  a.target = '_blank'; // a标签增加target属性
+  a.click();
+  a.remove(); // 移除a标签
+};

packages/image-gallery/tsconfig.json

@@ -11,6 +11,7 @@
     /* 模块导入配置项 */
     "esModuleInterop": true,
     "lib": ["ESNext", "DOM"],
-    "types": ["../../types", "@types/jest", "types"]
+    "baseUrl": ".",
+    "types": ["../../types", "@types/jest", "./types"]
   }
 }