File size: 2,625 Bytes
d9c705e |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 |
/**
* Converts an image URL to a base64 data URL with white background made transparent
*/
export async function makeWhiteTransparent(imageUrl: string): Promise<string> {
return new Promise((resolve, reject) => {
const img = new Image();
img.crossOrigin = 'anonymous';
img.onload = () => {
const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');
if (!ctx) {
reject(new Error('Failed to get canvas context'));
return;
}
canvas.width = img.width;
canvas.height = img.height;
// Draw the image
ctx.drawImage(img, 0, 0);
// Get image data
const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
const data = imageData.data;
// Define white threshold (adjust if needed)
const whiteThreshold = 240; // RGB values above this are considered "white"
// Make white pixels transparent
for (let i = 0; i < data.length; i += 4) {
const r = data[i];
const g = data[i + 1];
const b = data[i + 2];
// Check if pixel is white-ish
if (r > whiteThreshold && g > whiteThreshold && b > whiteThreshold) {
// Calculate how "white" this pixel is (0-1)
const whiteness = Math.min(r, g, b) / 255;
// Make it transparent based on whiteness
data[i + 3] = Math.floor((1 - whiteness) * 255);
}
}
// Put the modified image data back
ctx.putImageData(imageData, 0, 0);
// Convert to base64
const base64 = canvas.toDataURL('image/png');
resolve(base64);
};
img.onerror = () => {
reject(new Error('Failed to load image'));
};
img.src = imageUrl;
});
}
/**
* Fetches an image from URL and converts it to base64
*/
export async function imageUrlToBase64(imageUrl: string): Promise<string> {
return new Promise((resolve, reject) => {
const img = new Image();
img.crossOrigin = 'anonymous';
img.onload = () => {
const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');
if (!ctx) {
reject(new Error('Failed to get canvas context'));
return;
}
canvas.width = img.width;
canvas.height = img.height;
ctx.drawImage(img, 0, 0);
const base64 = canvas.toDataURL('image/png');
resolve(base64);
};
img.onerror = () => {
reject(new Error('Failed to load image'));
};
img.src = imageUrl;
});
} |