Hiding white areas of JPEG images

I want to mask a total White (R:255,G:255,B:255) areas in a JPEG image, so when viewed in the browser, in the total white areas I will see what underneath (those area will be transparent). I don’t mind using JQuery, CSS 3 or Canvas, whatever works to achieve this. Thanks

OK, the code:

        var canvas = document.getElementById('myCanvas');
        var context = canvas.getContext('2d');
        var x = 0;
        var y = 0;
        var width = 228;
        var height = 454;
        var imageObj = new Image();

        imageObj.onload = function ()
            context.drawImage(imageObj, x, y, width, height);

            var canvas = document.getElementById('myCanvas');
            var ctx = canvas.getContext('2d');

            var imgData = ctx.getImageData(0, 0, width, height);
            var pixels = imgData.data; // get pixel data

            for (var i = 0; i < pixels.length; i +=4)
                var r = pixels[i ];
                var g = pixels[i + 1]
                var b = pixels[i  + 2];

                if (r === 255 && g === 255 && b === 255) {
                    pixels[i + 3] = 1;

            ctx.clearRect(0, 0, canvas.width, canvas.height);
            ctx.putImageData(imgData, 0, 0);
        imageObj.src = 'img/test_image.jpg';

This code seems to do the job, but I get some scattered white dots in the area which is total white.

Your code looks fairly correct, but I would suggest these changes:

You set the canvas size to 228×454, but if your image is slightly
different sized, you may be accidentally scaling
the source image when you draw it to the canvas. So, scale the canvas to exactly the image size:

canvas.width=imageObj.width;   // be sure canvas is *exactly* image sized to prevent
canvas.height=imageObj.height; // accidental scaling which might skew pixel colors

You set the “transparent” pixels to 1 when you should set them to 0 for full transparency:

pixels[i+3]=0;      // 0 instead of 1 for pure transparency

You are only masking pure white–rgb(255,255,255). It’s possible some of the pixels in your image are “nearly” white, so you might try masking some near-white pixels too.

var nearWhite=250;  // try experimenting with different “near white” values
if(r>nearWhite && g>nearWhite && b>nearWhite)

[Edited: To provide complete code]

Here is the code (works for me on my computer).

Be sure your image source is on your local domain, otherwise you will run into a security violation
and the image will draw, but the white pixels will not be made transparent. So no http://otherDomain.com/picture.jpg


    body{ background-color: ivory; }
    canvas{border:1px solid red;}

    var canvas=document.getElementById("canvas");
    var ctx=canvas.getContext("2d");
    var imageObj = new Image();
    imageObj.onload = function () {

        ctx.drawImage(imageObj, 0,0);

        var imgData = ctx.getImageData(0, 0, canvas.width, canvas.height);
        var pixels = imgData.data; // get pixel data
        for (var i = 0; i 250 && g>250 && b>250) {
                pixels[i + 3] = 0;
        ctx.putImageData(imgData, 0, 0);

}); // end $(function(){});


Hello, buddy!责编内容来自:Hello, buddy! (源链) | 更多关于

本站遵循[CC BY-NC-SA 4.0]。如您有版权、意见投诉等问题,请通过eMail联系我们处理。
酷辣虫 » 综合编程 » Hiding white areas of JPEG images

喜欢 (0)or分享给?

专业 x 专注 x 聚合 x 分享 CC BY-NC-SA 4.0

使用声明 | 英豪名录