feat:image preview component add download feature

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;

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>

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)

src/editor/utils/index.ts

@@ -60,3 +60,10 @@ export function splitText(text: string): string[] {
   }
   return data
 }
+
+export function downloadFile(href: string, fileName: string) {
+  const a = document.createElement('a')
+  a.href = href
+  a.download = fileName
+  a.click()
+}