Skip to content

Commit

Permalink
update
Browse files Browse the repository at this point in the history
  • Loading branch information
@guillaume-chervet
guillaume-chervet committed Jul 26, 2023
1 parent 5f67c94 commit 288271d
Show file tree
Hide file tree
Showing 3 changed files with 69 additions and 95 deletions.
20 changes: 20 additions & 0 deletions src/Opencv/image.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -179,4 +179,24 @@ export const computeMargin = (img, xmin, ymin, xmax, ymax, margin_ratio_percenta
const rectangle = {xmin: newXmin, ymin: newYmin, xmax: newXmax, ymax: newYmax, marginRatio: marginRatio};
console.log(rectangle)
return rectangle;
}

const b64toBlob = (b64Data, contentType='', sliceSize=512) => {
const byteCharacters = atob(b64Data);
const byteArrays = [];

for (let offset = 0; offset < byteCharacters.length; offset += sliceSize) {
const slice = byteCharacters.slice(offset, offset + sliceSize);

const byteNumbers = new Array(slice.length);
for (let i = 0; i < slice.length; i++) {
byteNumbers[i] = slice.charCodeAt(i);
}

const byteArray = new Uint8Array(byteNumbers);
byteArrays.push(byteArray);
}

const blob = new Blob(byteArrays, {type: contentType});
return blob;
}
31 changes: 23 additions & 8 deletions src/Opencv/templateMatching.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -67,27 +67,42 @@ export const findMatch = (cv) => (template, image) => {
end = end + destination.cols;
}

let average = Math.round( total/totalPoint * 10);

matchQuality = average;
matchQuality = Math.round(total / totalPoint * 10);


let colorBlue = new cv.Scalar(200, 255, 100, 255);
var point1 = new cv.Point( Math.round( (image.cols - template.cols) / 2) , Math.round( (image.rows - template.rows)/2));
var point2 = new cv.Point( Math.round( (image.cols - template.cols) / 2) + template.cols , Math.round( (image.rows - template.rows)/2) + template.rows);
cv.rectangle(image, point1, point2, colorBlue, 1, cv.LINE_8, 0);
let colorRed = new cv.Scalar(255, 100, 200, 255);
// let colorRed = new cv.Scalar(255, 100, 200, 255);
//cv.putText(image, matchQuality.toString(), new cv.Point(10, 30), cv.FONT_HERSHEY_SIMPLEX, 1.0, colorRed, 1, cv.LINE_AA);

let currentPoints = null;
if(maxPoint.x > 0 && maxPoint.y > 0 && Math.abs(maxPoint.x - point1.x) < 10 && Math.abs(maxPoint.y - point1.y) < 10 ) {
const lineSize = average < 0.1 ? 1 : Math.round( average );
matchQuality = 0.1;
//const lineSize = average < 0.1 ? 1 : Math.round( average );
matchQuality = 1;
cv.rectangle(image, maxPoint, point, color, 1, cv.LINE_8, 0);
currentPoints = {
x1: maxPoint.x / image.cols,
y1: maxPoint.y / image.rows,
x2: point.x / image.cols,
y2: point.y / image.rows,
}
}
else{
matchQuality = 0;

}
mask.delete();
destination.delete();
return {image, matchQuality: matchQuality};
return {
image,
matchQuality: matchQuality,
targetPoints: {
x1: point1.x / image.cols,
y1: point1.y / image.rows,
x2: point2.x / image.cols,
y2: point2.y / image.rows
},
currentPoints
};
}
113 changes: 26 additions & 87 deletions src/Opencv/video.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -151,85 +151,8 @@ const transformFunction = async (imageCvTemplate, imageCvTemplateDescription, im

const imgCvTemplateResized = imd.image;

const {image: imageCv, matchQuality} = findMatch(cv)(imageCvTemplate, imgCvTemplateResized);
return {imageCv, matchQuality};
if (matchQuality > 0) {

const bestOutput = toImageBase64(cv)(imgCv);
const newState = {
...state,
output: outputCv,
bestNumberPoint: matchQuality,
bestOutput: bestOutput,
};
state = newState;
return;
// const imgDescription = JSON.parse(state.jsonContent)
// const limiteRate = parseInt((state.confidenceRate + state.confidenceRate / 8), 10);
// console.log("limiteRate", limiteRate)
/* promise = zoneAsync(cv)(imgCv, imageCvTemplateDescription, 30).then(result => {
try {
console.log("result", result);
if (result && result?.goodMatchSize > state.confidenceRate) {
const bestOutput = toImageBase64(cv)(imgCv);
const newState = {
...state,
output: outputCv,
bestNumberPoint: numberPoint,
bestOutput: bestOutput,
//url: result?.croppedContoursBase64,
confidenceRate: result?.goodMatchSize
};
if( result && result.finalImage) {
const iVideo = document.createElement('img');
iVideo.id = cuid();
iVideo.style = "max-width: 400px";
iVideo.src = toImageBase64(cv)(result.finalImage);
document.getElementById(divId).appendChild(iVideo);
}
state = newState;
}
promise = null;
} catch (e) {
console.log(e)
promise = null;
}
}
);*/

/*
const result = await computeAndApplyHomography(cv)(imgDescription, imgCv, state.confidenceRate);
if (result?.goodMatchSize > state.confidenceRate) {
const bestOutput = toImageBase64(cv)(imgCv);
const newState = {
...state,
output: outputCv,
bestNumberPoint: numberPoint,
bestOutput: bestOutput,
//url: result?.croppedContoursBase64,
confidenceRate: result?.goodMatchSize
};
const iVideo = document.createElement('img');
iVideo.id = cuid();
iVideo.src = toImageBase64(cv)(result?.finalImage);
document.getElementById(divId).appendChild(iVideo);
state = newState;
}*/

} else {
const newState = {...state, numberPoint, output: outputCv};
state = newState;
}
// imgCv.delete();
// imgCvTemplateResized.delete();
return outputCv;
const {image: imageCv, matchQuality, targetPoints, currentPoints} = findMatch(cv)(imageCvTemplate, imgCvTemplateResized);
return {imageCv, matchQuality, targetPoints, currentPoints};
} catch (e) {
console.log(e)
}
Expand Down Expand Up @@ -382,20 +305,32 @@ export const loadVideoAsync = (cv) => (imageCvTemplate, imageCvTemplateDescripti
try {
// start processing.
videoCapture.read(src);
const imageOutput = imageResize(cv)(src, 1600).image;
const {imageCv, matchQuality, targetPoints, currentPoints} = await transformFunction(imageCvTemplate, imageCvTemplateDescription, imageOutput, iDivImagesId, state);
const point1 = new cv.Point(Math.round(targetPoints.x1 * imageOutput.cols), Math.round(targetPoints.y1 * imageOutput.rows));
const point2 = new cv.Point(Math.round(targetPoints.x2 * imageOutput.cols), Math.round(targetPoints.y2 * imageOutput.rows));

let colorBlue = new cv.Scalar(0, 150, 238, 255);
cv.rectangle(imageOutput, point1, point2, colorBlue, 30, cv.LINE_8, 0);

const {imageCv, matchQuality} = await transformFunction(imageCvTemplate, imageCvTemplateDescription, src, iDivImagesId, state);
let diff;
if(matchQuality > 0) {
if(currentPoints != null) {
numberFollowingMatchQuality++;
let colorRed = new cv.Scalar(255, 0, 0, 255);
diff = Math.round((Date.now() - beginMatch) / 1000);
const font = cv.FONT_HERSHEY_SIMPLEX;
const fontScale = 0.5;
const thickness = 2;
const fontScale = 10;
const thickness = 20;
const baseline=0;
// const size= cv.getTextSize('Test', font, fontScale, thickness, baseline);
const size = new cv.Size(10, 10);
cv.putText(imageCv, diff.toString(), new cv.Point(Math.round( imageCv.cols /2 - size.width /2), Math.round( imageCv.rows /2 - size.height /2)), font, fontScale, colorRed, thickness, cv.LINE_AA);
const size = new cv.Size(280, -280);
cv.putText(imageOutput, diff.toString(), new cv.Point(Math.round( imageOutput.cols /2 - size.width /2), Math.round( imageOutput.rows /2 - size.height /2)), font, fontScale, colorRed, thickness, cv.LINE_AA);

const point1 = new cv.Point(Math.round(currentPoints.x1 * imageOutput.cols), Math.round(currentPoints.y1 * imageOutput.rows));
const point2 = new cv.Point(Math.round(currentPoints.x2 * imageOutput.cols), Math.round(currentPoints.y2 * imageOutput.rows));

let colorGreen = new cv.Scalar(95, 225, 62, 150);
cv.rectangle(imageOutput, point1, point2, colorGreen, 20, cv.LINE_8, 0);
}
else {
numberFollowingMatchQuality = 0;
Expand Down Expand Up @@ -469,10 +404,14 @@ export const loadVideoAsync = (cv) => (imageCvTemplate, imageCvTemplateDescripti

}

if(imageCv) {
cv.imshow(outputCanvas, imageCv)
if(imageCv){
imageCv.delete();
}

if(imageOutput) {
cv.imshow(outputCanvas, imageOutput)
imageOutput.delete();
}
return src;
} catch (err) {
console.error(err);
Expand Down

0 comments on commit 288271d

Please sign in to comment.