This commit is contained in:
X1627315083
2024-09-03 16:39:06 +08:00
54 changed files with 1298 additions and 723 deletions

View File

@@ -436,27 +436,28 @@ function segmentImage(markerImage,fullImage,size){
const ctx1 = markerCanvas.getContext('2d');
const ctx2 = fullCanvas.getContext('2d');
const ctx3 = nullCanvas.getContext('2d');
let targetMarkerUrl = ''
let targetFullUrl = ''
markerCanvas.width=size.width
markerCanvas.height=size.height
fullCanvas.height=size.height
fullCanvas.width=size.width
nullCanvas.height=size.height
nullCanvas.width=size.width
let targetFrontUrl = ''
let targetBackUrl = ''
const marker = new Image();
const full = new Image();
marker.width = size.width;
marker.height = size.height;
full.width = size.width;
full.height = size.height;
console.log(full);
marker.crossOrigin = 'anonymous';
full.crossOrigin = 'anonymous';
marker.onload = () => {
ctx1.drawImage(marker,0,0 ,size.width, size.height);
full.onload = () => {
ctx2.drawImage(full,0,0, size.width, size.height);
segmentImage();
segmentImageItem();
};
full.src = fullImage;
};
marker.src = markerImage;
full.src = fullImage;
function segmentImage() {
function segmentImageItem() {
const markerData = ctx1.getImageData(0, 0, size.width, size.height);
const fullData = ctx2.getImageData(0, 0, size.width, size.height);
@@ -464,12 +465,17 @@ function segmentImage(markerImage,fullImage,size){
const color1 = { r: 255, g: 0, b: 0 }; // 第一个颜色
const color2 = { r: 0, g: 255, b: 0 }; // 第二个颜色
const threshold = 50; // 颜色匹配的容差
const threshold = 100; // 颜色匹配的容差
// const isColorMatch = (r, g, b, color) =>
// (Math.abs(r - color.r) < threshold) || (Math.abs(0 - color.r) < threshold) &&
// (Math.abs(g - color.g) < threshold) || (Math.abs(0 - color.g) < threshold) &&
// (Math.abs(b - color.b) < threshold) || (Math.abs(0 - color.b) < threshold)
const isColorMatch = (r, g, b, color) =>
Math.abs(r - color.r) < threshold &&
Math.abs(g - color.g) < threshold &&
Math.abs(b - color.b) < threshold;
(Math.abs(r - color.r) < threshold || Math.abs(0 - color.r) < threshold) &&
(Math.abs(g - color.g) < threshold || Math.abs(0 - color.g) < threshold) &&
(Math.abs(b - color.b) < threshold || Math.abs(0 - color.b) < threshold)
const output1 = ctx3.createImageData(size.width, size.height);
const output2 = ctx3.createImageData(size.width, size.height);
@@ -523,10 +529,9 @@ function segmentImage(markerImage,fullImage,size){
ctx.putImageData(imageData, 0, 0);
return canvas.toDataURL('image/png');
};
targetMarkerUrl =createImageURL(output1)
targetFullUrl =createImageURL(output2)
console.log(targetFullUrl,targetMarkerUrl);
resolve({targetMarkerUrl, targetFullUrl})
targetBackUrl =createImageURL(output2)
targetFrontUrl =createImageURL(output1)
resolve({targetFrontUrl, targetBackUrl})
}
})
}