origin

At home, I had nothing to do, so I re-opened html5 and CSS3 documents to learn. When I saw the BOX-shadow of CSS, I suddenly wondered if I could draw pictures with this effect.

The principle of

Box-shadow: 15px 10px 0px 5px RGB (255,255,255);Copy the code

Above is a simple box-shadow effect. 15px represents the X-axis value, 10px represents the Y-axis,0px represents the blur value, 5px represents the size of the shadow, and finally the color. X and y values are mandatory, and everything else is optional.

Let’s first write a simple demo, blur and shadow values are set to 0 sort, code as follows:

<style> .container{ width:30px; height:30px; background:red; The box - shadow: 35 px 35 px RGB (0, 0); } </style> <div class="container"></div>
Copy the code

The effect is as follows:

Then change the style to the following:

<style> .container{ width:1px; height:1px; background:red; border-radius: 50%; The box - shadow: 35 px 35 px RGB (0, 0); } </style> <div class="container"></div>
Copy the code

The effect is as follows:

The div and its shadow become dots. You can change the x and y values of the shadow to move, for example, to draw a line:

 <style>
        .container {
            width: 1px;
            height: 1px;
            border-radius: 50%;
            background: red;
            box-shadow: 35px 35px rgb(0, 0, 0),
                        36px 35px rgb(0, 0, 0), 
                        37px 35px rgb(0, 0, 0),
                        38px 35px rgb(0, 0, 0),
                        39px 35px rgb(0, 0, 0),
                        40px 35px rgb(0, 0, 0),
                        41px 35px rgb(0, 0, 0),
                        42px 35px rgb(0, 0, 0),
                        43px 35px rgb(0, 0, 0),
                        44px 35px rgb(0, 0, 0),
                        45px 35px rgb(0, 0, 0);
        }
    </style>
<div class="container"></div>
Copy the code

The effect is as follows:

I learned in junior high school that points move into lines, and lines move into planes, and the picture is also composed of pixels, so we only need to find the coordinates of these pixels and the corresponding color value of the coordinates to draw with shadows.

Python code implementation

There is a PIL library for processing images in Python. First install this library using PIP, and then start writing code.

def transform(image_file):
    # Change the image mode to RGB
    image_file = image_file.convert("RGB")
    Get each pixel of the text image
    img_datas = image_file.load()
    prototype = ""
    The #size attribute indicates the resolution of the image, with '0' for horizontal size and '1' for vertical
    for h in range(0,image_file.size[1]):  
        for w in range(0,image_file.size[0]):
            img_color_data = img_datas[w,h]
            # print(img_color_data) #(255, 192, 165)
            prototype += "{x}px {y}px rgb{color},".format(x=w,y=h,color=img_color_data)
    return prototype[:-1]+";"
Copy the code

This code first converts the image to RGB mode, then reads the color value line by line using a double for loop, and concatenates the x and Y values into a box-shadow attribute. The complete code is as follows:

# -*- coding: utf-8 -*-
#author: PM 
      @xuxinkai.cn>
from PIL import Image

def transform(image_file):
    # Change the image mode to RGB
    image_file = image_file.convert("RGB")
    Get each pixel of the text image
    img_datas = image_file.load()
    prototype = ""
    The #size attribute indicates the resolution of the image, with '0' for horizontal size and '1' for vertical
    for h in range(0,image_file.size[1]):  
        for w in range(0,image_file.size[0]):
            img_color_data = img_datas[w,h]
            # print(img_color_data) #(255, 192, 165)
            prototype += "{x}px {y}px rgb{color},".format(x=w,y=h,color=img_color_data)
    return prototype[:-1]+";"

def get_html(new_pro):
    html1 = ' ''
         
       
        ' '
    html2 = ' '' }    
      
 
      
   '' '
    return html1+new_pro+html2

# Change the image address
fp = open('./a.jpg'.'rb')
image_file = Image.open(fp)
# Resize the imageImage_file =image_file.resize((int(image_file.size[0]*0.5), int(image_file.size[1]*0.5))) TMP = open('a.html'.'w',encoding='utf-8')
tmp.write(get_html(transform(image_file)))
tmp.close()
Copy the code

Effect preview:

Online Experience Address

** Browser calculations take time, so be patient

conclusion

This is a low cost experiment, after I sent the post to V2EX, some elder brother said that it can be used as anti-crawl verification code, on reflection, it can indeed. In addition to doing reverse crawling, I personally think it can be used to draw small ICONS.

The above only introduces the Python version of the implementation, the JavaScript version of the implementation: github.com/pmxiaokaige…

Finally, I attach my blog: xuxinkai. Cn /