makeNonTransparentAreasWhite | makeNonTransparentWhiteAreasTransparent | getFirstpixelesColorAndMakeNonTransparentAreasTransparent

gistfile_colorfunky.js

function makeNonTransparentAreasWhite(imageElement) {
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');
    canvas.width = imageElement.width;
    canvas.height = imageElement.height;
    ctx.drawImage(imageElement, 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) {
        if (data[i + 3] > 0) { // Wenn Alpha > 0, setze die Farbe auf Weiß
            data[i] = 255;     // Rot
            data[i + 1] = 255; // Grün
            data[i + 2] = 255; // Blau
        }
    }

    ctx.putImageData(imageData, 0, 0);
    return canvas.toDataURL();
}
function makeNonTransparentWhiteAreasTransparent(imageElement) {
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');
    canvas.width = imageElement.width;
    canvas.height = imageElement.height;
    ctx.drawImage(imageElement, 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) {
        if (data[i] === 255 && data[i + 1] === 255 && data[i + 2] === 255) { // Wenn die Farbe Weiß ist
            data[i + 3] = 0; // Setze Alpha auf 0, um es transparent zu machen
        }
    }

    ctx.putImageData(imageData, 0, 0);
    return canvas.toDataURL();
}
function getFirstpixelesColorAndMakeNonTransparentAreasTransparent(imageElement) {
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');
    canvas.width = imageElement.width;
    canvas.height = imageElement.height;
    ctx.drawImage(imageElement, 0, 0);

    const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
    const data = imageData.data;

    const firstPixelColor = { r: data[0], g: data[1], b: data[2] };

    for (let i = 0; i < data.length; i += 4) {
        if (data[i] === firstPixelColor.r && data[i + 1] === firstPixelColor.g && data[i + 2] === firstPixelColor.b) {
            data[i + 3] = 0; // Setze Alpha auf 0, um es transparent zu machen
        }
    }

    ctx.putImageData(imageData, 0, 0);
    return canvas.toDataURL();
}