QQ effect visit address:
7xp9v5.com1.z0.glb.clouddn.com/change.gif
Address of effect drawing:
7xp9v5.com1.z0.glb.clouddn.com/change.png

Or have you ever seen QQ space has a period of time to brush the screen a lot of small pictures

When a larger version

You must think it’s amazing, but how is it done?

The principle of

In fact, the principle is not very complicated, some people think it is a two-frame GIF, but it is not, the secret behind the image is PNG format, its background is transparent, while in QQ or Tieba some places, when it is a small picture, the background is white, when you click open, the background is black, All you have to do is control this PNG to show different images on white background and black background. If you don’t understand, I will explain how to make photoshop and program separately.

Sneak peek! IO /fun-photo-c…) Github address: github.com/BUPT-HJM/fu…

PS part

1. Prepare two pictures

The desorption step (Image -> Adjustments -> desorption) is omitted. Note that this step is required because the image is black and white, so this step is not used.

Prepare two images and put two background test layers between them for easy viewing

2. Display part with white background

For images with a white background, we need to remove the highlights (you can also get highlights by sampling the color) so that the image is not visible when the background is black

You can choose the color tolerance and range, select the appropriate range, for this image you can also choose the same as MINE, color tolerance 42, color range 249, and then click OK

Press the delete to delete

Then light up the white background to see how it looks

Light up the black background to see how it looks

We want the effect not to show it on a black background, how do we do that? Click on the red box below to adjust the brightness and contrast of this layer

Then apply several layers to that layer, hold Alt between that adjustment layer and the white background layer to apply that adjustment layer only to that layer (extremely important), and the result is the original scary woman disappearing into the night

And then finally, you can make that layer 50% transparent and you can light up the white layer and the black layer and test that to see if the white layer is lit up and the black layer is all black, and if you do that, you’re done.

3.Black bottom shows part

In fact, the treatment process of black and white is about the same. We need to remove the black part of the image (you can also take the black from the image by sampling the color) to make sure that when the background is white, it will not be visible in this photo. So when selecting the color range, change the color to sample color and take the black, like this

Select delete and see how it displays on black and white background as it does on white background.

Same thing with brightness and contrast

As above, apply several adjustment layers to this layer until you can hardly see the black man

Finally adjust the opacity to 50%

4. Effect display

We can do a layer merge (note: the black image must be below the white image), merge all the layers except the background image, and then we can light them separately to see the effect when the white background is lit

When the black background lights up

Isn’t that amazing?

If you still don’t understand can directly ask me HHH

Canvas synthesizer

The principle of understanding, do a synthesizer is not very difficult, but still need some small algorithms in image processing, such as to color and high brightness these.

IO /fun-photo-c…) Github address: github.com/BUPT-HJM/fu…

It’s like PHOTOSHOP layer

I use two canvas to make this synthesizer, one canvas for uploading pictures and one background canvas, which is absolutely positioned in the same place to achieve the effect similar to PS layer.

ImageData

We need to pull out the ImageData from the uploaded image for processing. 1. Color removal in fact, color removal is not difficult, I found the algorithm from the Internet, is to set r, G, B all to the brightness of the image

Brightness formula: 0.299 red + 0.587 green + 0.114 * blue

2. Color range processing For the picture to be displayed on a white background, we need to remove the highlight part. We can judge the brightness of each pixel and then do transparency processing according to the brightness to achieve the effect.

function processing(canvas) { var ctx = canvas.getContext("2d"); var imgData = ctx.createImageData(canvas.width, canvas.height); var arr = imgData.data; for (var i = 0, len = data.length; i < len; i += 4) { var red = data[i], green = data[i + 1], blue = data[i + 2], alpha = data[i + 3], Y = 0.299 * red + 0.587 * green + 0.114 * blue; var k = 130; arr[i] = y; arr[i + 1] = y; arr[i + 2] = y; arr[i + 3] = alpha * (k - y) / 255; if (y > k) { arr[i + 3] = 0; } } return imgData; } function processingBlack(canvas) { var ctx = canvas.getContext("2d"); var imgData = ctx.createImageData(canvas.width, canvas.height); var arr = imgData.data; for (var i = 0, len = data.length; i < len; i += 4) { var red = data[i], green = data[i + 1], blue = data[i + 2], alpha = data[i + 3], Y = 0.299 * red + 0.587 * green + 0.114 * blue; Y = y * 4.5; var k = 100; arr[i] = y; arr[i + 1] = y; arr[i + 2] = y; Arr [I + 3] = alpha * y / 255 * 0.08; if (y < 150) { arr[i + 3] = 0; } } return imgData; }Copy the code

Image save

Because there is no background, some mobile terminal can not directly save the generated pictures

On the PC, you can directly right-click to save or click download picture. On the mobile, you can click download picture or generate picture and hold down to save


function saveImg() {
    var imgUrl = canvas_img.toDataURL("image/png").replace("image/png", "image/octet-stream");
    var a = document.createElement('a');
    a.download = "fun.png";
    a.href = canvas_img.toDataURL();
    a.click();
    }
function createImg() {
    imgBox.innerHTML = "";
    var img = document.createElement("img");
    img.src = canvas_img.toDataURL("image/png");
    imgBox.appendChild(img);
    }
Copy the code

The last

Thanks for reading ~ welcome to github.com/BUPT-HJM/fu… Give a small star ha ha ha then I recently opened a public number, welcome to pay attention to ~ push technology related or essay and so on HH welcome to pay attention to

It can be reproduced and quoted freely, but the author must be signed and indicate the source of the article.