fabricjs 实现图像的二值化功能

一、效果图

二、图像二值化的作用

二值化是图像处理中常用的一种方法,其作用是将灰度图像转换为二值图像,即将图像中的像素点根据其灰度值分成两类:黑色和白色。这种处理方法可以帮助我们更清晰地识别图像中的目标,简化图像的复杂度,提高图像的处理速度和准确性。

三、实现思路

1、获取框选的图片,进行截图

c 复制代码
    <div>
      <canvas
        ref="grayCanvas"
        :width="canvasProp.width"
        :height="canvasProp.height"
      ></canvas>
      <canvas
        ref="binaryCanvas"
        :width="canvasProp.width"
        :height="canvasProp.height"
      ></canvas>
    </div>

    <!-- 隐藏的 canvas -->
    <canvas
      ref="hiddenCanvas"
      :width="canvasProp.width"
      :height="canvasProp.height"
      style="display: none;"
    ></canvas>
   // 根据框选的数据,对原图进行截图
    getCanvasImageData() {
      const viewportTransform = this.fabricCanvas.viewportTransform;
      const zoom = this.fabricCanvas.getZoom();
      let selectedCoords = null;

      this.fabricCanvas.getObjects().forEach(rect => {
        const coords = [];
        const points = rect.get("aCoords");

        Object.keys(points).forEach(key => {
          let point = points[key];
          const actualX = (point.x - viewportTransform[4]) / zoom;
          const actualY = (point.y - viewportTransform[5]) / zoom;
          coords.push([Math.round(actualX), Math.round(actualY)]);
        });

        // 假设只有一个矩形对象,我们只需获取一个对象的坐标
        selectedCoords = coords;
      });

      if (selectedCoords) {
        // 获取矩形区域的最小和最大坐标
        const minX = Math.min(...selectedCoords.map(coord => coord[0]));
        const minY = Math.min(...selectedCoords.map(coord => coord[1]));
        const maxX = Math.max(...selectedCoords.map(coord => coord[0]));
        const maxY = Math.max(...selectedCoords.map(coord => coord[1]));

        const width = maxX - minX;
        const height = maxY - minY;

        // 从隐藏的 canvas 中获取选中区域的图像数据
        const ctx = this.$refs.hiddenCanvas.getContext("2d");
        return ctx.getImageData(minX, minY, width, height);
      }

      return null;
    },
    

页面中要有3个canvas,grayCanvas 画灰度图片,binaryCanvas画二值化图片,hiddenCanvas 画原始的图片便于截图

2、对图片进行灰度处理

转化为灰度图片,放在灰度画布中

c 复制代码
  convertToGrayScale(imageData) {
      const data = imageData.data;
      for (let i = 0; i < data.length; i += 4) {
        const avg = 0.3 * data[i] + 0.59 * data[i + 1] + 0.11 * data[i + 2];
        data[i] = avg;
        data[i + 1] = avg;
        data[i + 2] = avg;
      }
      return imageData;
    },
    applyGrayScale() {
      const imageData = this.getCanvasImageData();
      const grayImageData = this.convertToGrayScale(imageData);
      const grayCtx = this.$refs.grayCanvas.getContext("2d");
      grayCtx.putImageData(grayImageData, 0, 0);
      this.applyThreshold();
    },

3、拖动滑块,根据阈值对图片进行二值化处理

c 复制代码
    applyThreshold() {
      const grayCtx = this.$refs.grayCanvas.getContext("2d");
      const grayImageData = grayCtx.getImageData(
        0,
        0,
        this.canvasProp.width,
        this.canvasProp.height
      );
      const data = grayImageData.data;
      for (let i = 0; i < data.length; i += 4) {
        const avg = data[i];
        const value = avg > this.threshold ? 255 : 0;
        data[i] = value;
        data[i + 1] = value;
        data[i + 2] = value;
      }
      const binaryCtx = this.$refs.binaryCanvas.getContext("2d");
      binaryCtx.putImageData(grayImageData, 0, 0);
    },

4、添加滑块移动的监听

c 复制代码
   this.fabricCanvas.on("object:modified", this.applyGrayScale);
   this.fabricCanvas.on("object:added", this.applyGrayScale);
   this.fabricCanvas.on("object:removed", this.applyGrayScale);
相关推荐
coding随想10 分钟前
JavaScript中的系统对话框:alert、confirm、prompt
开发语言·javascript·prompt
pobu16836 分钟前
aksk前端签名实现
java·前端·javascript
0wioiw01 小时前
Flutter基础(前端教程⑤-组件重叠)
开发语言·前端·javascript
冰天糖葫芦1 小时前
VUE实现数字翻牌效果
前端·javascript·vue.js
Brilliant Nemo1 小时前
集成CommitLInt+ESLint+Prettier+StyleLint+LintStaged
javascript
嘉琪0011 小时前
2025 js——面试题(7)——ajax相关
开发语言·javascript·ajax
liu_yueyang1 小时前
JavaScript VMP (Virtual Machine Protection) 分析与调试
开发语言·javascript·ecmascript
huihuihuanhuan.xin2 小时前
前端八股-promise
前端·javascript
西瓜_号码2 小时前
React中Redux基础和路由介绍
javascript·react.js·ecmascript