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);
相关推荐
Martin -Tang1 小时前
Vue 3 中,ref 和 reactive的区别
前端·javascript·vue.js
FakeOccupational3 小时前
nodejs 020: React语法规则 props和state
前端·javascript·react.js
放逐者-保持本心,方可放逐3 小时前
react 组件应用
开发语言·前端·javascript·react.js·前端框架
曹天骄4 小时前
next中服务端组件共享接口数据
前端·javascript·react.js
郝晨妤6 小时前
鸿蒙ArkTS和TS有什么区别?
前端·javascript·typescript·鸿蒙
喝旺仔la6 小时前
vue的样式知识点
前端·javascript·vue.js
别忘了微笑_cuicui6 小时前
elementUI中2个日期组件实现开始时间、结束时间(禁用日期面板、控制开始时间不能超过结束时间的时分秒)实现方案
前端·javascript·elementui
尝尝你的优乐美6 小时前
vue3.0中h函数的简单使用
前端·javascript·vue.js
windy1a6 小时前
【C语言】js写一个冒泡顺序
javascript
会发光的猪。7 小时前
如何使用脚手架创建一个若依框架vue3+setup+js+vite的项目详细教程
前端·javascript·vue.js·前端框架