画布印花合成

This commit is contained in:
李志鹏
2026-01-05 11:47:36 +08:00
parent 780270882e
commit 73aca07391
13 changed files with 198 additions and 41 deletions

View File

@@ -61,11 +61,14 @@ export async function restoreFabricObject(serializedObject, canvas) {
/**
* 获取对象黑白通道画布
* @param {fabric.Object} object - 要处理的 fabric 对象
* @param {ImageData} revData - 相反的ImageData白通道的相同位置是否为透明revData为白色为透明黑色为不透明
* @returns {HTMLCanvasElement|null} 包含黑白通道的画布,或 null 如果失败
*/
export function getObjectAlphaToCanvas(object) {
export function getObjectAlphaToCanvas(object, revData) {
const image = object.getElement();
const { width, height } = image;
if(!width || !height){
if (!width || !height) {
console.warn("对象没有元素");
return null;
}
@@ -80,12 +83,23 @@ export function getObjectAlphaToCanvas(object) {
const g = data.data[i + 1];
const b = data.data[i + 2];
const a = data.data[i + 3];
const revR = revData?.data[i + 0] || 0;
const revG = revData?.data[i + 1] || 0;
const revB = revData?.data[i + 2] || 0;
const revA = revData?.data[i + 3] || 0;
if (r || g || b || a) {
data.data[i + 0] = 255;
data.data[i + 1] = 255;
data.data[i + 2] = 255;
data.data[i + 3] = 255;
}else{
if (revR || revG || revB || revA) {
data.data[i + 0] = 0;
data.data[i + 1] = 0;
data.data[i + 2] = 0;
data.data[i + 3] = 0;
} else {
data.data[i + 0] = 255;
data.data[i + 1] = 255;
data.data[i + 2] = 255;
data.data[i + 3] = 255;
}
} else {
data.data[i + 0] = 0;
data.data[i + 1] = 0;
data.data[i + 2] = 0;