From 08676abf0593acc19e3b81cd737bc5f8e41fc7fd Mon Sep 17 00:00:00 2001
From: Hufe921 <huangyunfeihufe@hotmail.com>
Date: Thu, 23 Jun 2022 20:49:04 +0800
Subject: [PATCH] feat:image preview component add download feature

---
 src/editor/assets/css/index.css                | 4 ++++
 src/editor/assets/images/image-download.svg    | 1 +
 src/editor/core/draw/particle/ImageParticle.ts | 7 +++++++
 src/editor/utils/index.ts                      | 7 +++++++
 4 files changed, 19 insertions(+)
 create mode 100644 src/editor/assets/images/image-download.svg

diff --git a/src/editor/assets/css/index.css b/src/editor/assets/css/index.css
index 2b3c201..f9ce7a7 100644
--- a/src/editor/assets/css/index.css
+++ b/src/editor/assets/css/index.css
@@ -207,6 +207,10 @@
   background-image: url(../images/original-size.svg);
 }
 
+.image-previewer .image-menu i.image-download {
+  background-image: url(../images/image-download.svg);
+}
+
 .table-tool__row {
   position: absolute;
   width: 12px;
diff --git a/src/editor/assets/images/image-download.svg b/src/editor/assets/images/image-download.svg
new file mode 100644
index 0000000..8df2bd5
--- /dev/null
+++ b/src/editor/assets/images/image-download.svg
@@ -0,0 +1 @@
+<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg"><path d="M4.5 15v3.5h15V15H21v5H3v-5h1.5zm8.232-11.226v9.196l4.05-4.05 1.06 1.06-5.834 5.834-5.833-5.833 1.06-1.06 3.998 3.996V3.774h1.5z" fill="#3D4757"/></svg>
\ No newline at end of file
diff --git a/src/editor/core/draw/particle/ImageParticle.ts b/src/editor/core/draw/particle/ImageParticle.ts
index 9a03538..e40253e 100644
--- a/src/editor/core/draw/particle/ImageParticle.ts
+++ b/src/editor/core/draw/particle/ImageParticle.ts
@@ -1,6 +1,7 @@
 import { IImageParticleCreateResult } from '../../../interface/Draw'
 import { IEditorOption } from '../../../interface/Editor'
 import { IElement, IElementPosition } from '../../../interface/Element'
+import { downloadFile } from '../../../utils'
 import { Draw } from '../Draw'
 
 export class ImageParticle {
@@ -228,6 +229,12 @@ export class ImageParticle {
       this._setPreviewerTransform(scaleSize, rotateSize, x, y)
     }
     menuContainer.append(originalSize)
+    const imageDownload = document.createElement('i')
+    imageDownload.classList.add('image-download')
+    imageDownload.onclick = () => {
+      downloadFile(img.src, `${this.curElement?.id}.png`)
+    }
+    menuContainer.append(imageDownload)
     previewerContainer.append(menuContainer)
     this.previewerContainer = previewerContainer
     document.body.append(previewerContainer)
diff --git a/src/editor/utils/index.ts b/src/editor/utils/index.ts
index efb2ec2..0db944d 100644
--- a/src/editor/utils/index.ts
+++ b/src/editor/utils/index.ts
@@ -59,4 +59,11 @@ export function splitText(text: string): string[] {
     data.push(t)
   }
   return data
+}
+
+export function downloadFile(href: string, fileName: string) {
+  const a = document.createElement('a')
+  a.href = href
+  a.download = fileName
+  a.click()
 }
\ No newline at end of file