Home.vue

<template><el-input v-model="Val" style="width: 400px"></el-input><el-button @click="imgHandler">过滤</el-button><hr /><canvas id="myCanvas" width="500" height="500"></canvas>
</template><script lang="ts" setup>
import { ref } from "vue";
import myImgs from "../../public/04.jpg";
const Val = ref("");//定义画布
let canvas: any;
let ctx: any;
let img = new Image();
img.src = myImgs;
img.onload = function () {canvas = document.getElementById("myCanvas");ctx = canvas.getContext("2d");ctx.drawImage(img, 0, 0, 500, 500);
};//创建webWorker,指向public/pic.ts
//地址需要是线上地址
let worker1 = new Worker("http://localhost:5173/pic.ts");
worker1.addEventListener("message", (e) => {const imgData = e.data;ctx.putImageData(imgData, 0, 0);
});
function imgHandler() {//获取画布数据const imageData = ctx.getImageData(0, 0, 500, 500);//发送数据给workerworker1.postMessage(imageData);
}
</script><style lang="scss" scoped></style>

 pic.ts

self.addEventListener("message", (e) => {if (e.data.data.length) {let imgData = e.data;for (let i = 0; i < imgData.data.length; i += 4) {for (let j = 0; j < 25500; j++) {if (imgData.data[i] !== 255) {imgData.data[i] = Math.min(imgData.data[i] + j, 0);}}}self.postMessage(imgData);}
});

效果