Hiding white areas of JPEG images

综合技术 2017-12-26

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 228x454, 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!

责编内容by:Hello, buddy! (源链)。感谢您的支持!


绘制镜像线条了解一下? 功能需求:“用户绘制一条线,然后镜像出另外一条线。” 下面是我实现的过程,怕以后要用,就记下来了。 首先对问题的描述转化了一下:“求p(x, y)点, 关于直线p1(x1, y1), p...
Pixel Canvas Animation I want to animate an Arc on Canvas, and it works (with a really basic animation, interval), but t...
Javascript heavily packaged, multiple qu... I came across a website today. It was a challenge of some developers about making the smallest g...
A simple guide: How to select a chart library to u... A simple guide: How to select a chart library to use? If you need to apply a chart on the web, i...
Creation & lt; Canvas & gt&se... I am making a text editor using HTML5 canvas by which I can update text, change fonts, move fonts...