图片利用canvas去除背景，抠图

最新推荐文章于 2025-01-03 16:54:58 发布

龟中的程序员

最新推荐文章于 2025-01-03 16:54:58 发布

阅读量2.2k

点赞数 2

分类专栏： JavaScript基础文章标签：前端 javascript canva可画 html

本文链接：https://blog.youkuaiyun.com/HAI_GUI/article/details/131804888

版权

JavaScript基础专栏收录该内容

9 篇文章

订阅专栏

图片利用canvas去除背景，抠图

1.先上传一张图片，获取图片的file信息

html

	<input type="file" id="file" style="display: none" />
    <button id="update">上传</button>
    <div class="imgBox">
      <img src="" alt="" id="img" />
    </div>

js

	let fileInput = document.getElementById("file");
	let update = document.getElementById("update");
	// 上传
    update.addEventListener("click", () => {
      fileInput.click();
    });
    fileInput.addEventListener("change", () => {
      let file = fileInput.files[0];
      let reader = new FileReader();
      reader.readAsDataURL(file);
      reader.onload = (e) => {
        preview.src = e.target.result;
      };
    });

2.通过点击图片获取需要去除的背景颜色

	document.getElementById("img").addEventListener("mousedown", (e) => {
      x = e.pageX - 10;
      y = e.pageY - 10;
      const img = document.getElementById("img");
      const w = img.width;
      const h = img.height;

      const canvas = document.createElement("canvas");
      canvas.width = w;
      canvas.height = h;

      context.drawImage(img, 0, 0, w, h);

      let imageData = context.getImageData(x, y, 10, 10);

      let rectColor =
        "rgb(" +
        imageData.data[0] +
        ", " +
        imageData.data[1] +
        "," +
        imageData.data[2] +
        ")";

      let rgba = rectColor.match(/\d+/g).map(Number);
      rgba.push(255);
      console.log(reba)
    });

3.把获取到图片转成canvas，利用canvas获取每一个像素点数据，再遍历获取的所有像素数据，把获取的背景颜色通过公式计算，把颜色去除的rgba去除掉，最后把去除后的canvas转成图片格式

			/**
             *Note: 去除图片背景
             * img:  图片信息
             * rgba: 去除色
             * tolerance: 容差值
             **/
            function removeImgBg(img, rgba, tolerance) {
                var imgData = null;
                const [r0, g0, b0, a0] = rgba;
                var r, g, b, a;
                const canvas = document.createElement('canvas');
                const context = canvas.getContext('2d');
                const w = img.width;
                const h = img.height;

                canvas.width = w;
                canvas.height = h;
                context.drawImage(img, 0, 0);
                imgData = context.getImageData(0, 0, w, h);

                for (let i = 0; i < imgData.data.length; i += 4) {
                    r = imgData.data[i];
                    g = imgData.data[i + 1];
                    b = imgData.data[i + 2];
                    a = imgData.data[i + 3];
                    const t = Math.sqrt((r - r0) ** 2 + (g - g0) ** 2 + (b - b0) ** 2 + (a - a0) ** 2);
                    if (t <= tolerance) {
                        imgData.data[i] = 0;
                        imgData.data[i + 1] = 0;
                        imgData.data[i + 2] = 0;
                        imgData.data[i + 3] = 0;
                    }
                }
                context.putImageData(imgData, 0, 0);
                const newBase64 = canvas.toDataURL('image/png');
                img.src = newBase64;
            }

最后效果如下

请添加图片描述

全部代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      * {
        padding: 0;
        margin: 0;
        box-sizing: border-box;
      }
      .imgBox {
        width: 500px;
        height: 500px;
        /* border: 1px solid #000; */
      }

      img {
        width: 100%;
        height: 100%;
      }
    </style>
  </head>
  <body>
    <div>
      <input type="file" id="file" style="display: none" />
      <button id="update">上传</button>
      <button id="back">还原</button>
      <button id="down">下载</button>
      容差范围: <input id="text" type="text" onchange="change(value)" />
    </div>
    <div class="imgBox">
      <img src="" alt="" id="img" />
    </div>
  </body>
  <script>
    let value = 100;
    let fileInput = document.getElementById("file");
    let preview = document.getElementById("img");
    let update = document.getElementById("update");
    let text = document.getElementById("text");
    function change(val) {
      value = val;
    }
    // 上传
    update.addEventListener("click", () => {
      fileInput.click();
    });
    fileInput.addEventListener("change", () => {
      let file = fileInput.files[0];
      let reader = new FileReader();
      reader.readAsDataURL(file);
      reader.onload = (e) => {
        preview.src = e.target.result;
      };
    });
    document.getElementById("img").addEventListener("mousedown", (e) => {
      x = e.pageX - 10;
      y = e.pageY - 10;
      // console.log('位置信息', x, y);
      const img = document.getElementById("img");
      const w = img.width;
      const h = img.height;

      const canvas = document.createElement("canvas");
      const context = canvas.getContext("2d");
      canvas.width = w;
      canvas.height = h;

      context.drawImage(img, 0, 0);
      // imgData = context.getImageData(0, 0, w, h);

      let imageData = context.getImageData(x, y, 10, 10);

      let rectColor =
        "rgb(" +
        imageData.data[0] +
        ", " +
        imageData.data[1] +
        "," +
        imageData.data[2] +
        ")";

      let rgba = rectColor.match(/\d+/g).map(Number);
      rgba.push(255);
      console.log(rgba, "rgba");
      removeImgBg(preview, rgba, value);

      // //显示文字
      // document.getElementById('colorText').innerText = rectColor;
      // //显示画布
      // rectCtx.fillStyle = rectColor;
      // rectCtx.fillRect(0, 0, rectCanvas.width, rectCanvas.height);
    });
    function removeImgBg(img, rgba, tolerance) {
      var imgData = null;
      const [r0, g0, b0, a0] = rgba;
      var r, g, b, a;
      const canvas = document.createElement("canvas");
      const context = canvas.getContext("2d");
      const w = img.width;
      const h = img.height;

      canvas.width = w;
      canvas.height = h;
      context.drawImage(img, 0, 0, w, h);
      imgData = context.getImageData(0, 0, w, h);

      for (let i = 0; i < imgData.data.length; i += 4) {
        r = imgData.data[i];
        g = imgData.data[i + 1];
        b = imgData.data[i + 2];
        a = imgData.data[i + 3];
        const t = Math.sqrt(
          (r - r0) ** 2 + (g - g0) ** 2 + (b - b0) ** 2 + (a - a0) ** 2
        );
        if (t <= tolerance) {
          imgData.data[i] = 0;
          imgData.data[i + 1] = 0;
          imgData.data[i + 2] = 0;
          imgData.data[i + 3] = 0;
        }
      }

      context.putImageData(imgData, 0, 0);
      const newBase64 = canvas.toDataURL("image/png");
      img.src = newBase64;
    }
  </script>
</html>