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);
相关推荐
ggdpzhk19 分钟前
VUE:基于MVVN的前端js框架
前端·javascript·vue.js
小曲曲1 小时前
接口上传视频和oss直传视频到阿里云组件
javascript·阿里云·音视频
学不会•2 小时前
css数据不固定情况下,循环加不同背景颜色
前端·javascript·html
EasyNTS3 小时前
H.264/H.265播放器EasyPlayer.js视频流媒体播放器关于websocket1006的异常断连
javascript·h.265·h.264
活宝小娜5 小时前
vue不刷新浏览器更新页面的方法
前端·javascript·vue.js
程序视点5 小时前
【Vue3新工具】Pinia.js:提升开发效率,更轻量、更高效的状态管理方案!
前端·javascript·vue.js·typescript·vue·ecmascript
coldriversnow5 小时前
在Vue中,vue document.onkeydown 无效
前端·javascript·vue.js
我开心就好o5 小时前
uniapp点左上角返回键, 重复来回跳转的问题 解决方案
前端·javascript·uni-app
刚刚好ā6 小时前
js作用域超全介绍--全局作用域、局部作用、块级作用域
前端·javascript·vue.js·vue
yqcoder7 小时前
reactflow 中 useNodesState 模块作用
开发语言·前端·javascript