分割
This commit is contained in:
@@ -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})
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user