Canvas 原生实现图片涂抹打马赛克功能

最新推荐文章于 2024-06-07 11:38:47 发布

朱nw

最新推荐文章于 2024-06-07 11:38:47 发布

阅读量1.4k

点赞数 1

分类专栏：前端文章标签：前端

本文链接：https://blog.csdn.net/sinat_39013092/article/details/122180641

版权

先看效果

打码后的代码截图
上图是一段打码过后的代码截图。

简单说一下实现思路

就是通过创建多个canvas，一个用来绘制原图，一个用来绘制全马赛克图，一个用来绘制笔迹或者叫打码的区域，最后一个canvas用来将三个canvas绘制到一个canvas之上。

主要是通过设置canvas的globalCompositeOperation属性设置“图层”的叠加情况。马赛克图层通过笔迹图层遮罩显示，一开始笔迹图层为空，所以马赛克图层不会显示，通过用户在马赛克图层上涂抹笔迹，马赛克图层显示，从而达到涂抹打马赛克的效果。

废话少说直接上代码

<!DOCTYPE html>
<html>

<head>
</head>

<body>
    <div style="position: relative;">
        <!-- http://cover.acfunwiki.org/cover.php -->
        <!-- <img alt="asd" src="./tmp.png" style="position: absolute;" /> -->
        <canvas id="canvas" style="position: absolute;"></canvas>
    </div>
    <script>
        let image = new Image()
        image.src = "./tmp.png"

        // let canvas:HTMLCanvasElement = document.getElementById("canvas")
        let canvas = document.getElementById("canvas")
        let ctx = canvas.getContext("2d")

        let canvas_1 = document.createElement("canvas")
        let canvas_layer_1 = canvas_1.getContext("2d") // 用来画原图的图层
        let canvas_2 = document.createElement("canvas")
        let canvas_layer_2 = canvas_2.getContext("2d") // 用来画马赛克图的图层
        let canvas_3 = document.createElement("canvas")
        let canvas_layer_3 = canvas_3.getContext("2d") // 用来画笔迹的图层
        image.onload = async () => {
     
            canvas_3.width