Canvas截屏

源代码如下：

<template>
<div @mousedown="startDrawing" @mousemove="drawRectangle" @mouseup="stopDrawing">
  <a-button @click="close" style="position: absolute;z-index: 99;">关闭</a-button>
  <img id="image" style="width: 100%;height: 100vh;position: absolute;" :src="imageUrl" @load="imageLoad" v-show="false"/>
  <canvas id="canvas" ref="canvasRef" style="position: absolute;z-index: 1;"></canvas>
  <canvas id="canvas2" style="position: absolute;z-index: 2;border: 1px solid red;" v-show="canvasShow"></canvas>
</div>
</template>
<script setup>
import { ref } from "vue";

const ipcRenderer = window.electron?.ipcRenderer

const imageUrl = ref()
const canvasShow = ref(false)

ipcRenderer.invoke('getImageData').then(res => {
  imageUrl.value = res
})
function imageLoad() {
  const image = document.getElementById('image')
  const canvas = document.getElementById('canvas');
  const ctx = canvas.getContext('2d');
  canvas.width = image.width;
  canvas.height = image.height;
  ctx.drawImage(image, 0, 0, image.width, image.height);
  // Add a semi-transparent overlay (mask)
  ctx.fillStyle = 'rgba(0, 0, 0, 0.7)';
  ctx.fillRect(0, 0, canvas.width, canvas.height);
}

const canvasRef = ref(null);
const drawing = ref(false);
let startX, startY;
function startDrawing(e) {
  drawing.value = true;
  const canvas = canvasRef.value;
  startX = e.clientX - canvas.getBoundingClientRect().left;
  startY = e.clientY - canvas.getBoundingClientRect().top;
}

function drawRectangle(e) {
  if (!drawing.value) return;
  canvasShow.value = true
  const canvas = canvasRef.value;
  const currentX = e.clientX - canvas.getBoundingClientRect().left;
  const currentY = e.clientY - canvas.getBoundingClientRect().top;
  const width = currentX - startX;
  const height = currentY - startY;

  const image = document.getElementById('image')
  const canvas2 = document.getElementById('canvas2');
  canvas2.style.left = startX + 'px'
  canvas2.style.top = startY + 'px'
  const ctx2 = canvas2.getContext('2d');
  canvas2.width = width;
  canvas2.height = height;
  ctx2.drawImage(image, startX, startY, width, height, 0, 0, width, height);
}

function stopDrawing() {
  drawing.value = false;
}


function close() {
  ipcRenderer.invoke('closeScreenWindows')
}
</script>
<style scoped lang="less">

</style>

• 圆形

<div id="div" style="background: #000;height: 100%;">
  <img id="image" style="width: 100%;height: 100vh;position: absolute;display:none;" src="" />
  <canvas id="canvas" ref="canvasRef" style="position: absolute;z-index: 1;"></canvas>
  <canvas id="canvas2" style="position: absolute;z-index: 2;"></canvas>
</div>

<script>
window.onload = function() {

let canvasShow = false

  const image = document.getElementById('image')
  const divDom = document.getElementById('div')
  const canvas = document.getElementById('canvas');
  const canvas2 = document.getElementById('canvas2');

  canvas2.width = image.width;
  canvas2.height = image.height;
  const ctx = canvas.getContext('2d');
  canvas.width = image.width;
  canvas.height = image.height;
  ctx.drawImage(image, 0, 0, image.width, image.height);
  // Add a semi-transparent overlay (mask)
  ctx.fillStyle = 'rgba(0, 0, 0, 0.7)';
  ctx.fillRect(0, 0, canvas.width, canvas.height);


let startX, startY, drawing = false;

divDom.onmousedown = function startDrawing(e) {
  drawing = true;
  startX = e.clientX - canvas.getBoundingClientRect().left;
  startY = e.clientY - canvas.getBoundingClientRect().top;
}

divDom.onmousemove = function drawRectangle(e) {
  if (!drawing) return;
         const currentX = e.clientX - canvas.getBoundingClientRect().left;
    const currentY = e.clientY - canvas.getBoundingClientRect().top;

    const radius = Math.sqrt(Math.pow(currentX - startX, 2) + Math.pow(currentY - startY, 2));

    const ctx2 = canvas2.getContext('2d');
    canvas2.width = canvas.width;
    canvas2.height = canvas.height;

    // Clear canvas2
    ctx2.clearRect(0, 0, canvas2.width, canvas2.height);

    // Draw the original image
    ctx2.drawImage(image, 0, 0, canvas2.width, canvas2.height);

    // Draw a semi-transparent overlay (mask) inside the circle
    ctx2.globalCompositeOperation = 'destination-in';
    ctx2.beginPath();
    ctx2.arc(startX, startY, radius, 0, 2 * Math.PI);
    ctx2.fill();
    ctx2.globalCompositeOperation = 'source-over';
}

divDom.onmouseup = function stopDrawing() {
  drawing = false;
}

}
</script>
<style >

</style>