更新 'src/App.vue'

src/App.vue

@@ -1,20 +1,20 @@
 <script setup lang="ts">
 import { ref } from 'vue'
-const bigBox = ref({ width: window.innerWidth + 'px', height: window.innerHeight + 'px' })
+const screen = window.screen
+const bigBox = ref({ width: screen.width + 'px', height: screen.height + '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 capImg = ref({ width: screen.width + 'px', height: screen.height + 'px', transform: 'translate(0px,0px)' })
 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 imgSourese = ref(localStorage.getItem('URL')||'')
 
 const canvas = document.createElement('canvas')
-canvas.width = window.innerWidth
-canvas.height = window.innerHeight
+canvas.width = screen.width
+canvas.height = screen.height
 
 const img = new Image()
-img.style.width = `${window.innerWidth / window.devicePixelRatio}px`
-img.style.height = `${window.innerHeight / window.devicePixelRatio}px`
+img.style.width = `${screen.width / window.devicePixelRatio}px`
+img.style.height = `${screen.height / window.devicePixelRatio}px`
 img.crossOrigin = 'Anonymous';
 
 function capBoxMove(e: any) {
@@ -27,15 +27,15 @@ function capBoxMove(e: any) {
     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') {
         close()
+        if(who === 'close') window.electron.send('screenClose')
     } else if (who === 'save') {
         // 保存
         const { x, y, width, height } = capboxDom.value.getBoundingClientRect()
         const context = canvas.getContext('2d')
-        img.src = imgSourese
+        img.src = imgSourese.value
         img.onload = () => {
             context?.drawImage(img, 0, 0, canvas.width, canvas.height)
             const needData = context?.getImageData(x, y, width, height)
@@ -44,12 +44,9 @@ function capBoxMove(e: any) {
             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()
-            })
+            // 传base64
+            const base64 = newcanvas.toDataURL('image/png')
+            window.electron.send('screenSave', base64)
         }
     }
 
@@ -108,6 +105,33 @@ function close() {
     capBox.value.display = 'none'
     toolStyle.value.display = 'none'
 }
+
+window.electron.on('source-screen', async (data: Any) => {
+    const canvas = document.createElement('canvas')
+    canvas.width = data.length * data[0].width
+    canvas.height = data[0].height
+    const context = canvas.getContext('2d')
+
+    await new Promise((res, rej) => {
+        for (let k = 0; k < data.length; k++) {
+            const el = data[k];
+            const img = new Image()
+            img.width = el.width
+            img.height = el.height
+            img.src = el.base64
+            img.onload = () => {
+                context.drawImage(img, k * el.width, 0)
+                if (k === (data.length - 1)) res(true)
+            }
+        }
+    })
+
+    canvas.toBlob(e => {
+        const url = URL.createObjectURL(e)
+        imgSourese.value = url
+        localStorage.setItem('URL',url)
+    })
+})
 </script>
 <template>
     <div class="screen" @mousedown="capBoxMove" :style="bigBox">
@@ -151,6 +175,15 @@ function close() {
 
     </div>
 </template>
+<style>
+html,body{
+    width: 100vw;
+    height: 100vh;
+    overflow: hidden;
+    margin: 0;
+}
+
+</style>
 <style scoped lang="scss">
 .screen {
     background: grey;