detail页面sketch支持镜像、detail图片合成由前端来做,但是新增sketch还是要过接口,sketch调整细节位置变更

This commit is contained in:
X1627315083
2026-01-13 14:07:51 +08:00
parent e1ca896764
commit 833d43d7d1
23 changed files with 1799 additions and 586 deletions

View File

@@ -618,6 +618,60 @@ function segmentImage(markerImage,fullImage,size){
}
})
}
/**
* 处理PNG图片透明度转白色其他颜色转透明
* @param {string} sketchImage - 原始图片
* @returns {Promise} 处理后的ase64
*/
function sketchToMask(sketchImage) {
return new Promise((resolve, reject) => {
const img = new Image();
img.crossOrigin = 'anonymous';
img.onload = function() {
try {
const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');
canvas.width = img.width;
canvas.height = img.height;
ctx.drawImage(img, 0, 0);
const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
const data = imageData.data;
for (let i = 0; i < data.length; i += 4) {
const r = data[i];
const g = data[i + 1];
const b = data[i + 2];
const a = data[i + 3];
if (a > 0) {
data[i] = 0;
data[i + 1] = 0;
data[i + 2] = 0;
data[i + 3] = 0;
} else {
// 完全透明的像素 -> 纯白色
data[i] = 255;
data[i + 1] = 255;
data[i + 2] = 255;
data[i + 3] = 255;
}
}
ctx.putImageData(imageData, 0, 0);
const base64 = canvas.toDataURL('image/png');
resolve(base64);
} catch (error) {
reject(error);
}
};
img.onerror = function() {
reject(new Error('图片加载失败'));
};
img.src = sketchImage;
});
}
export {
isEmail,
getUploadUrl,
@@ -640,5 +694,6 @@ export {
setGradual,
calculateGradientCoordinate,
segmentImage,
UrlToFile
UrlToFile,
sketchToMask
}