增加保存显示，增加切图

src/App.vue

@@ -3,8 +3,19 @@ import { ref } from 'vue'
 const bigBox = ref({ width: window.innerWidth + 'px', height: window.innerHeight + 'px' })
 const capBox = ref({ width: '0px', height: '0px', display: 'none', transform: 'translate(0px,0px)' })
 const capImg = ref({ width: window.innerWidth + 'px', height: window.innerHeight + 'px', transform: 'translate(0px,0px)' })
-const toolStyle = ref({ transform: 'translate(0, 0)', display: 'none' })
+const toolStyle = ref({ width: '200px', marginTop: '10px', transform: 'translate(0px, 0px)', display: 'none' })
 const capboxDom = ref()
+const imgSourese = 'https://nashaofu.github.io/screenshots/assets/image-5cf1218d.jpg'
+
+
+const canvas = document.createElement('canvas')
+canvas.width = window.innerWidth
+canvas.height = window.innerHeight
+
+const img = new Image()
+img.style.width = `${window.innerWidth / window.devicePixelRatio}px`
+img.style.height = `${window.innerHeight / window.devicePixelRatio}px`
+img.crossOrigin = 'Anonymous';
 
 function capBoxMove(e: any) {
     const dom = e.target
@@ -15,13 +26,31 @@ function capBoxMove(e: any) {
     const oldTH = +capBox.value.transform.split('px')[1].split(',')[1]
     const capW = +capBox.value.width.replace('px', '')
     const capH = +capBox.value.height.replace('px', '')
+    const toolW = +toolStyle.value.width.replace('px', '')
     console.log(1, who);
 
     if (who === 'screen' || who === 'close') {
-        capBox.value.width = '0px'
-        capBox.value.height = '0px'
-        capBox.value.display = 'none'
-        toolStyle.value.display='none'
+        close()
+    } else if (who === 'save') {
+        // 保存
+        const { x, y, width, height } = capboxDom.value.getBoundingClientRect()
+        const context = canvas.getContext('2d')
+        img.src = imgSourese
+        img.onload = () => {
+            context?.drawImage(img, 0, 0, canvas.width, canvas.height)
+            const needData = context?.getImageData(x, y, width, height)
+            const newcanvas = document.createElement('canvas')
+            newcanvas.width = width
+            newcanvas.height = height
+            const newcontext = newcanvas.getContext('2d')
+            newcontext?.putImageData(needData as ImageData, 0, 0)
+            // 显示下
+            newcanvas.toBlob((e) => {
+                const url = URL.createObjectURL(e as Blob)
+                window.open(url)
+                close()
+            })
+        }
     }
 
     document.onmousemove = em => {
@@ -35,7 +64,7 @@ function capBoxMove(e: any) {
             capBox.value.height = y + 'px'
             capBox.value.transform = `translate(${sx}px,${sy}px)`
             capImg.value.transform = `translate(${-sx}px,${-sy}px)`
-            toolStyle.value.transform = `translate(${em.clientX - 200}px,${em.clientY + 10}px)`
+            toolStyle.value.transform = `translate(${em.clientX - toolW}px,${em.clientY}px)`
 
         } else if (who === 'move') {
             // 移动
@@ -43,7 +72,7 @@ function capBoxMove(e: any) {
             const h = y + oldTH
             capBox.value.transform = `translate(${w}px,${h}px)`
             capImg.value.transform = `translate(${-w}px,${-h}px)`
-            toolStyle.value.transform = `translate(${w + capW - 200}px,${h + capH + 10}px)`
+            toolStyle.value.transform = `translate(${w + capW - toolW}px,${h + capH}px)`
 
         } else if (who === 'right-bottom' || who === 'right-center' || who === 'bottom-center') {
             // 右下 右中 下中
@@ -51,40 +80,46 @@ function capBoxMove(e: any) {
             const h = y + capH
             if (who === 'right-center') {
                 capBox.value.width = w + 'px'
-                toolStyle.value.transform = `translate(${oldTW + w - 200}px,${oldTH + capH + 10}px)`
+                toolStyle.value.transform = `translate(${oldTW + w - toolW}px,${oldTH + capH}px)`
             } else if (who === 'bottom-center') {
                 capBox.value.height = h + 'px'
-                toolStyle.value.transform = `translate(${oldTW + capW - 200}px,${oldTH + h + 10}px)`
+                toolStyle.value.transform = `translate(${oldTW + capW - toolW}px,${oldTH + h}px)`
             } else {
                 capBox.value.width = w + 'px'
                 capBox.value.height = h + 'px'
-                toolStyle.value.transform = `translate(${oldTW + w - 200}px,${oldTH + h + 10}px)`
+                toolStyle.value.transform = `translate(${oldTW + w - toolW}px,${oldTH + h}px)`
             }
         }
     }
-    document.onmouseup = close
+
+    document.onmouseup = () => {
+        document.onmousemove = null
+        document.onmouseup = null
+        document.onselectstart = null
+        const capW = capBox.value.width.replace('px', '')
+        toolStyle.value.display = +capW ? 'flex' : 'none'
+
+    }
 }
 
 function close() {
-    document.onmousemove = null
-    document.onmouseup = null
-    document.onselectstart = null
-    const capW = capBox.value.width.replace('px', '')
-    toolStyle.value.display = +capW ? 'flex' : 'none'
+    capBox.value.width = '0px'
+    capBox.value.height = '0px'
+    capBox.value.display = 'none'
+    toolStyle.value.display = 'none'
 }
 </script>
 <template>
     <div class="screen" @mousedown="capBoxMove" :style="bigBox">
         <div class="screen-background">
-            <img class="screen-background-image" src="https://nashaofu.github.io/screenshots/assets/image-5cf1218d.jpg">
+            <img class="screen-background-image" :src="imgSourese">
             <div class="screen-background-mark" data-id="screen"></div>
         </div>
         <!-- capBox -->
         <div class="screen-box" ref="capboxDom" :style="capBox">
 
             <div class="screen-box-img">
-                <img class="screen-box-border-image" :style="capImg"
-                    src="https://nashaofu.github.io/screenshots/assets/image-5cf1218d.jpg">
+                <img class="screen-box-border-image" :style="capImg" :src="imgSourese">
             </div>
 
             <div class="screen-box-mask" data-id="move">
@@ -111,7 +146,7 @@ function close() {
             <icon name="rightTop" color="#333" :size="22" />
             <icon name="font" color="#333" :size="22" />
             <icon name="close" color="#333" :size="22" data-id="close" type="close" />
-            <icon name="write" color="#333" :size="22" />
+            <icon name="write" color="#333" :size="22" data-id="save" type="save" />
         </div>
 
     </div>
@@ -149,13 +184,8 @@ function close() {
         }
     }
 
-
-
-
     &-box {
         position: absolute;
-        width: 0;
-        height: 0;
         z-index: 5;
         left: 0;
         top: 0;
@@ -291,7 +321,6 @@ function close() {
     }
 
     &-tool {
-        width: 200px;
         position: absolute;
         z-index: 6;
         background: white;