Какие есть способы обработки изображения для выделения графика? То есть из изображения с графиком нужно отделить график от сетки и фона
Вот самый простой 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://i.stack.imgur.com/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/>
Айфон мало держит заряд, разбираемся с проблемой вместе с AppLab
я делаю регистрацию для приложения, связал с БД, всё вроде нормально, так же использовал готовое решение от ФейсбукаСуть в чём, при регистрации,...
Я тестирую чужой проектВ нем есть контроллер api которого я хочу проверить