canvas-worker和postmessage实现图片滤镜

最新推荐文章于 2024-06-06 00:20:51 发布

莫兮是我

最新推荐文章于 2024-06-06 00:20:51 发布

阅读量270

点赞数

分类专栏：前端 JS WEB 文章标签： canvas js

本文链接：https://blog.csdn.net/u013362192/article/details/114813032

版权

前端同时被 3 个专栏收录

67 篇文章 0 订阅

订阅专栏

59 篇文章 0 订阅

订阅专栏

WEB

50 篇文章 1 订阅

订阅专栏

canvas-worker和postmessage实现图片滤镜目录

文章目录

前言
- 注意
代码展示
效果展示
- `postMessage`
- `worker`

前言

postMessage：用于跨域的信息传递，此处用于worker的信息传递
worker：在H5中，允许出现多线程处理，可以缓解网站的性能瓶颈

注意

worker必须部署到服务器上Tomcat, apahce, live-server，并且启动时才能运行

代码展示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <input type="button" id="sunglassButton" value="Sunglasses">
    <canvas id="canvas"></canvas>
    <script src="main.js"></script>
</body>
</html>

// main.js
let image = new Image(),
    canvas = document.getElementById('canvas'),
    context = canvas.getContext('2d'),
    sunglassButton = document.getElementById('sunglassButton'),
    sunglassesOn = false,
    sunglassFilter = new Worker('sunglassFilter.js');

// Functions
function putSunglassesOn() {
    sunglassFilter.postMessage(
        context.getImageData(0,0,canvas.width,canvas.height)
    );

    sunglassFilter.onmessage = function(e) {
        context.putImageData(e.data,0,0);
    };
}

function drawOriginalImage(){
    context.drawImage(image,0,0,
                    image.width,image.height,0,0,
                    canvas.width,canvas.height);
}

// Event handlers
sunglassButton.onclick = function() {
    if(sunglassesOn){
        sunglassButton.value = 'Sunglasses';
        drawOriginalImage();
        sunglassesOn = false;
    }else {
        sunglassButton.value = 'Original pic';
        putSunglassesOn();
        sunglassesOn = true;
    }
}

// initialization
image.src = '1.jpg';
image.onload = function() {
    drawOriginalImage();
}

// worker
// sunglassFilter.js
onmessage = function(event) {
    console.log(event);
    let imagedata = event.data,
        data = imagedata.data,
        length = data.length,
        width = imagedata.width;


    for(let i = 0; i < length; ++i) {
        if((i+1) % 4 != 0 ){
            if((i+4) % (width*4) == 0) {
                data[i] = data[i - 4];
                data[i+1] = data[i - 3];
                data[i+2] = data[i-2];
                data[i+3] = data[i-1];
                i+=4;
            }else {
                data[i] = 2 * data[i] - data[i+4] - 0.5 * data[i+4];
            }
        }
    }

    postMessage(imagedata);
}

效果展示

`postMessage`

在这里插入图片描述

`worker`

在这里插入图片描述

莫兮是我

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
canvas-worker和postmessage实现图片滤镜

canvas-worker和postmessage实现图片滤镜目录文章目录前言注意代码展示效果展示`postMessage``worker`前言postMessage：用于跨域的信息传递，此处用于worker的信息传递worker：在H5中，允许出现多线程处理，可以缓解网站的性能瓶颈注意worker必须部署到服务器上Tomcat, apahce, live-server，并且启动时才能运行代码展示<!DOCTYPE html><html lang="en"&g
复制链接

扫一扫