This is the first day of my participation in the More text Challenge. For details, see more text Challenge

preface

Today is Children’s Day, in yesterday’s circle of friends was a message brush screen and become a hot search! That is:

A meeting of the Political Bureau of the Communist Party of China (CPC) Central Committee on May 31 called for further optimization of the country’s birth policy by implementing a policy allowing couples to have three children and supporting measures.

In a word, the state implements the policy that a couple can have three children.

As soon as the news was announced, it immediately stirred up thousands of waves on the Internet!

Skip the melaleuca here…… Qianceng wave… Qianceng wave… (Because that’s not what I want to talk about today.)

All I care about is you and me, and I’m worried about you and your third child and your girlfriend

So I thought I’d give you a new one

New a girlfriend

Say come, nothing is can be defeated front small white!

Much later….

class GF {
    constructor(name='Alice') {
        alert(I was `${name}I'm your girlfriend. I want to have three babies too)}}new GF()
Copy the code

Take it, please. You’re welcome!

Someone here is going to say, “Why is there no photo? Garbage!”

Considering all of you, well, I decided to draw for you! Nothing can beat the front end of the white!

Draw a girlfriend

1. Create a drawGF function

function drawGF(img_src = 'gf.jpg', color = '# 000', bg_color = "#fff"){}
Copy the code

The img_src function takes three parameters, img_src, color, and bg_color, which are the URL of the image that draws gf, the background of GF, and the background of the canvas, respectively

2. Get the canvas

let canvas = document.querySelector('#canvas')
let ctx = canvas.getContext('2d')
Copy the code

By default, the canvas element with id as canvas can be changed by itself. Also get the context CTX

3. Put the sample drawing into the canvas

var img = new Image();
img.src = img_src;
img.onload = function () {
    canvas.width = img.width;
    canvas.height = img.height;
    ctx.drawImage(img, 0.0)}Copy the code

When the image loads, set the canvas width to the image width and set the canvas height to the image height. The image is then drawn using the drawImage method

4. Obtain the pixel lattice information of the canvas

let imageData = ctx.getImageData(0.0, img.width, img.height).data;
Copy the code

Note:

  1. getImageDataIt returns an object with a property in itdata, which stores the data for each pixelRGBAValue;
  2. Due to thegetImageDataCause: You are advised to open it in the server environment. Otherwise, an error may occur

5. Fill the canvas

ctx.fillStyle = bg_color;
ctx.fillRect(0.0, img.width, img.height);
Copy the code

Fill the canvas using the fillStyle and fillRect methods of CTX

6. Start drawing and filling

let gap = 1
for (let h = 0; h < img.height; h += gap) {
    for (let w = 0; w < img.width; w += gap) {
        let position = (img.width * h + w) * 4;
        let r = imageData[position], g = imageData[position + 1], b = imageData[position + 2];
        if (r + g + b <= 510) {
            
            ctx.fillStyle = color;
            ctx.fillRect(w, h, 3.3); }}}Copy the code

The core idea is to take out the color value of each pixel and judge whether it is black. If it is, fill it and draw it. Note: set to 510, mainly to prevent some color r, G, B is not all 0, avoid causing the color of the place is not filled, you can adjust

7. A goddess appears

drawGF()
Copy the code

When you call drawGF, your goddess appears! As shown in figure

I can do it in a different picture and a different color

Such as: drawGF (‘ gf2. JPG ‘, ‘# f40’, ‘# CCC)

8. Complete code

function drawGF(img_src = 'gf.jpg', color = '# 000', bg_color = "#fff") {
    let canvas = document.querySelector('#canvas')
    let ctx = canvas.getContext('2d')
    let img = new Image()
    img.src = img_src
    img.onload = function () {
        canvas.width = img.width;
        canvas.height = img.height;
        ctx.drawImage(img, 0.0)
        let imageData = ctx.getImageData(0.0, img.width, img.height).data;
        ctx.fillStyle = bg_color;
        ctx.fillRect(0.0, img.width, img.height);
        let gap = 1
        for (let h = 0; h < img.height; h += gap) {
            for (let w = 0; w < img.width; w += gap) {
                let position = (img.width * h + w) * 4;
                let r = imageData[position], g = imageData[position + 1], b = imageData[position + 2];
                if (r + g + b <= 510) {
                    ctx.fillStyle = color;
                    ctx.fillRect(w, h, 3.3);
                }
            }
        }
    }
}
Copy the code

conclusion

  1. The disadvantage is that the performance is poor, and the practicality is low, can only be used for silhouette image;

  2. Through simple exercises, I reviewed the use of Canvas related APIS, such as drawImage, getImageData, fillStyle, fillRect, etc. The use of getImageData should be noted;

Remark:

  1. Inspiration from juejin.cn/post/696347…
  2. The code and data can be viewed at the following address: github.com/jCodeLife/r…
  3. Novice white, it is inevitable to run off. If it is not correct, I hope you can point it out, I will correct it in time, thanks!!