主页 / 问题 / 983208
Accepted
Clarence
Asked:2020-05-20 00:34:52 +0000 UTC2020-05-20 00:34:52 +0000 UTC

选择图像上的图形

  • 772

在此处输入图像描述图提取的图像处理方法有哪些？即从带有图表的图像中，需要将图表与网格和背景分开

java

1 个回答

  1. Best Answer

    这是edge detection带有阈值的最简单的一个给出了这个结果：

    在此处输入图像描述

    代码开启了webgl/glsl，但本质不变

    mat3 Gx = mat3(-1.0, 0.0, 1.0,
               -2.0, 0.0, 2.0,
               -1.0, 0.0, 1.0);

mat3 Gy = mat3(-1.0, -2.0, -1.0,
               0.0, 0.0, 0.0,
               1.0, 2.0, 1.0);

float applyKernel(mat3 gx, mat3 gy, sampler2D sampler, vec2 uv) {
    float horizontal = 0.0;
    float vertical = 0.0;   
    for (int i = 0; i < 3; i++) {
        for (int j = 0; j < 3; j++) {
          vec2 d = vec2(float(i), float(j)) / vec2(   ${w}., ${h}. );
          float averagePixel = dot(texture2D(texture, uv+d).xyz, vec3(0.333));
          horizontal += averagePixel * gx[i][j];
          vertical += averagePixel * gy[i][j];            
        }
    }
    return sqrt(horizontal * horizontal + vertical * vertical);
}


    let loader = new Image();
loader.crossOrigin = "anonymous";
loader.src = "https://cors-anywhere.herokuapp.com/https://isstatic.askoverflow.dev/S1HJ9.jpg";
loader.onload = function() { 
  
  let canvas = document.querySelector('canvas');
  let gl = canvas.getContext('webgl') || canvas.getContext('experimental-webgl');
  let w = canvas.width = loader.width;
  let h = canvas.height = loader.height;
  
  let pid = gl.createProgram();

  shader(`
    attribute vec2 coords;
      void main(void) {
      gl_Position = vec4(coords.xy, 0.0, 1.0);
    }
  `, gl.VERTEX_SHADER);

  shader(`
    precision highp float;
    uniform sampler2D texture;

    mat3 Gx = mat3(-1.0, 0.0, 1.0,
                   -2.0, 0.0, 2.0,
                   -1.0, 0.0, 1.0);

    mat3 Gy = mat3(-1.0, -2.0, -1.0,
                   0.0, 0.0, 0.0,
                   1.0, 2.0, 1.0);

    float applyKernel(mat3 gx, mat3 gy, sampler2D sampler, vec2 uv) {
        float horizontal = 0.0;
        float vertical = 0.0;   
        for (int i = 0; i < 3; i++) {
            for (int j = 0; j < 3; j++) {
              vec2 d = vec2(float(i), float(j)) / vec2(   ${w}., ${h}. );
              float averagePixel = dot(texture2D(texture, uv+d).xyz, vec3(0.333));
              horizontal += averagePixel * gx[i][j];
              vertical += averagePixel * gy[i][j];            
            }
        }
        return sqrt(horizontal * horizontal + vertical * vertical);
    }

    void main(void) {
      vec2 uv = vec2( gl_FragCoord.x / ${w}., gl_FragCoord.y / ${h}. );
      vec4 color = texture2D(texture, uv);
      float edge = applyKernel(Gx, Gy, texture, uv);
      edge = max(edge, 0.4);
      gl_FragColor = mix( 
        vec4(edge,edge,edge,1.), 
        color, 
        step(uv.x,0.5));
    }
  `, gl.FRAGMENT_SHADER);

  gl.linkProgram(pid);
  gl.useProgram(pid);

  let array = new Float32Array([-1,  3, -1, -1, 3, -1]);
  gl.bindBuffer(gl.ARRAY_BUFFER, gl.createBuffer());
  gl.bufferData(gl.ARRAY_BUFFER, array, gl.STATIC_DRAW);

  let al = gl.getAttribLocation(pid, "coords");
  gl.vertexAttribPointer(al, 2, gl.FLOAT, false, 0, 0);
  gl.enableVertexAttribArray(al);

  let texture = gl.createTexture();
  gl.bindTexture(gl.TEXTURE_2D, texture);
  gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, loader);
  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST);
  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST);
  
  var textureLocation = gl.getUniformLocation(pid, "texture");
  gl.uniform1i(textureLocation, 0);
  gl.viewport(0, 0, w, h);
  gl.clearColor(0, 0, 0, 0);
  gl.drawArrays(gl.TRIANGLES, 0, 3);
  
  function shader(src, type) {
    let sid = gl.createShader(type);
    gl.shaderSource(sid, src);
    gl.compileShader(sid);
    gl.attachShader(pid, sid);
  }
}
    <canvas/>

    • 1

相关问题