利用Canvas 实现前端图片涂抹效果

最新推荐文章于 2025-06-09 11:20:08 发布

scut_少东

最新推荐文章于 2025-06-09 11:20:08 发布

阅读量3.2k

点赞数

CC 4.0 BY-SA版权

分类专栏：前端

本文链接：https://blog.youkuaiyun.com/qq_33594380/article/details/87992331

本文介绍了如何利用Canvas在前端实现图片的涂抹效果。通过自定义mask并结合jQuery，将处理后的图片发送到后端，以达到image inpainting的目的。提供了相关的HTML和JS代码示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

最近在做image inpainting，想做一个前端页面，可以自定义mask，然后传到后端处理，效果如下：

代码如下：

html，其中的 jquery.min.js 随便找个jquery 的链接复制一下放到本地就好了。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">
    <title>img inpainting</title>
    <script src="./jquery.min.js"></script>
    <script src="./index.js"></script>
    <style>
        #canvas_draw{
            margin: 0px;
        }
        img {
          position: absolute;
          z-index: -1;
        }
    </style>
</head>
<body style="margin:0px;">
  <input id="img_upload" type="file"/><br>
  <img id="img_s