Skip to main content
edited body; edited tags
Source Link
Jamal
  • 35.2k
  • 13
  • 134
  • 238

I want to improve the code, what it does? Youin which you can enter a grey bitmap and it will return you a colored one.

function ChangeBaseGrey(bitmap, color)
{
var canvas = document.getElementById("imagesColored");
var ctx = canvas.getContext("2d");
var dataBitmap = bitmap.data;

var r0 = (color >> 16) & 0xff,
    g0 = (color >> 8) & 0xff,
    b0 = color & 0xff;

for(var c = 0; c < dataBitmap.length; c += 4)
{
    var r1 = dataBitmap[c],
        g1 = dataBitmap[c + 1],
        b1 = dataBitmap[c + 2];
     
    if(dataBitmap[c + 3] > 0 && (r1 == g1 && r1 == b1 && g1 == b1))
    {
        var co = color;
        dataBitmap[c] = colorRGBBound(r0 * (r1 / 255));
        dataBitmap[c + 1] = colorRGBBound(g0 * (g1 / 255));
        dataBitmap[c + 2] = colorRGBBound(b0 * (b1 / 255));
    }
}

ctx.putImageData(bitmap, 0, 0);

var finalImage = new Image();
finalImage.src = canvas.toDataURL("image/png");

return finalImage; // Colored Image Output
}

I want to improve the code, what it does? You can enter a grey bitmap and it return you a colored one.

function ChangeBaseGrey(bitmap, color)
{
var canvas = document.getElementById("imagesColored");
var ctx = canvas.getContext("2d");
var dataBitmap = bitmap.data;

var r0 = (color >> 16) & 0xff,
    g0 = (color >> 8) & 0xff,
    b0 = color & 0xff;

for(var c = 0; c < dataBitmap.length; c += 4)
{
    var r1 = dataBitmap[c],
        g1 = dataBitmap[c + 1],
        b1 = dataBitmap[c + 2];
     
    if(dataBitmap[c + 3] > 0 && (r1 == g1 && r1 == b1 && g1 == b1))
    {
        var co = color;
        dataBitmap[c] = colorRGBBound(r0 * (r1 / 255));
        dataBitmap[c + 1] = colorRGBBound(g0 * (g1 / 255));
        dataBitmap[c + 2] = colorRGBBound(b0 * (b1 / 255));
    }
}

ctx.putImageData(bitmap, 0, 0);

var finalImage = new Image();
finalImage.src = canvas.toDataURL("image/png");

return finalImage; // Colored Image Output
}

I want to improve the code, in which you can enter a grey bitmap and it will return you a colored one.

function ChangeBaseGrey(bitmap, color)
{
var canvas = document.getElementById("imagesColored");
var ctx = canvas.getContext("2d");
var dataBitmap = bitmap.data;

var r0 = (color >> 16) & 0xff,
    g0 = (color >> 8) & 0xff,
    b0 = color & 0xff;

for(var c = 0; c < dataBitmap.length; c += 4)
{
    var r1 = dataBitmap[c],
        g1 = dataBitmap[c + 1],
        b1 = dataBitmap[c + 2];
     
    if(dataBitmap[c + 3] > 0 && (r1 == g1 && r1 == b1 && g1 == b1))
    {
        var co = color;
        dataBitmap[c] = colorRGBBound(r0 * (r1 / 255));
        dataBitmap[c + 1] = colorRGBBound(g0 * (g1 / 255));
        dataBitmap[c + 2] = colorRGBBound(b0 * (b1 / 255));
    }
}

ctx.putImageData(bitmap, 0, 0);

var finalImage = new Image();
finalImage.src = canvas.toDataURL("image/png");

return finalImage; // Colored Image Output
}
Source Link

Grey to Colored Image

I want to improve the code, what it does? You can enter a grey bitmap and it return you a colored one.

function ChangeBaseGrey(bitmap, color)
{
var canvas = document.getElementById("imagesColored");
var ctx = canvas.getContext("2d");
var dataBitmap = bitmap.data;

var r0 = (color >> 16) & 0xff,
    g0 = (color >> 8) & 0xff,
    b0 = color & 0xff;

for(var c = 0; c < dataBitmap.length; c += 4)
{
    var r1 = dataBitmap[c],
        g1 = dataBitmap[c + 1],
        b1 = dataBitmap[c + 2];
     
    if(dataBitmap[c + 3] > 0 && (r1 == g1 && r1 == b1 && g1 == b1))
    {
        var co = color;
        dataBitmap[c] = colorRGBBound(r0 * (r1 / 255));
        dataBitmap[c + 1] = colorRGBBound(g0 * (g1 / 255));
        dataBitmap[c + 2] = colorRGBBound(b0 * (b1 / 255));
    }
}

ctx.putImageData(bitmap, 0, 0);

var finalImage = new Image();
finalImage.src = canvas.toDataURL("image/png");

return finalImage; // Colored Image Output
}