Use php to splicing pictures to achieve the effect of watermark

Use background php to splicing pictures to achieve the effect of watermark

Premise:
I am a small front-end, and the task requirements assigned by the boss are as follows
- run: WeChat applet
- provide pictures, process pictures
- use custom input questions to replace some text in the picture
- * save, share

---

Start

When I got this task, my first thought was canvas or graphic stacking . HTML5 canvas has still done some examples. To briefly explain, I only know the components of WeChat applet, and the API is better. Be excited to start doing it.

First look at the canvas component of the applet: as follows

After watching for a long time, I feel that there is no use for L, there is nothing I want, and then I continue to flip through and find the following APIs

I finally found what I wanted, and started to write a small demo, the newspaper basemap (PS processing) that I found by myself, and then the effect was achieved, but I never expected it. In the end, I found that the applet did not provide text styles. The method, only the size of the text, not even the thickness, forced to give up this method, listen to the method given by a big guy, and use the background php to synthesize pictures;

Specific ideas:

• put the image in the background
• Front-end display pictures, and then for users to choose
• After the user selects, the front end transmits the ID and text to the background
• After php receives the ID and text, splices the image corresponding to the ID with the text (pay attention to the position and font of the text)
• After the splicing is completed, the new image is returned to the front-end display to achieve the watermark effect.

First of all, I put the pictures that were not processed and processed in the background folder

• Contains the image font php file
  　
  

PHP code

<?php 

    $text = $_GET['text'];
    $id = $_GET['id'];
    echo $text;
    echo $id;
    $dst_path = "1.jpg";
    echo $dst_path;
    //创建图片的实例
    $dst = imagecreatefromstring(file_get_contents($dst_path));
    //打上文字
    $font = './STHUPO.TTF';//字体
    $black = imagecolorallocate($dst, 0, 0, 0);//字体颜色
    imagefttext($dst, 10.5, 0, 47, 119, $black, $font, $text);
    //输出图片
    list($dst_w, $dst_h, $dst_type) = getimagesize($dst_path);
    switch ($dst_type) {
        case 1://GIF
            header('Content-Type: image/gif');
           imagejpeg($dst,'new.gif');
            break;
        case 2://JPG
            header('Content-Type: image/jpg');
            imagejpeg($dst,'new.jpg');
            break;
        case 3://PNG
            header('Content-Type: image/png');
           imagejpeg($dst,'new.png');
            break;
        default:
            break;
    }
    imagedestroy($dst);
 ?>

 imagejpeg($dst,'new.jpg') 生成新的图片；运行之后你就可以看到你新生成的new.jpg了

The applet directly requests the newly generated picture and displays it on the interface, and completes the picture stitching. Personally, this can only be done in the background (referring to the WeChat applet). The canvas in H5 is more than this dog. No, it's much stronger.

reason:

Because Zhang Xiaolong wanted the WeChat applet to be light and small. Therefore, the canvas method provided is not enough to achieve this effect, only the color and font size can be changed, but the font and thickness cannot be changed; so the thief is troublesome

Summarize:

1. The front end first provides original pictures for users to choose from
2. After the user selects the picture, the front end passes the selected ID + text -> the background
3. In the background, according to the ID, save the corresponding font style, font, location information, etc.
4. The final backstage stitching picture
5. imagecreatefromstring creates an image instance
6. imagecolorallocate font color, imagefttext font position, weight, font
7. Output the image, and pass the newly generated image to the front-end display

Sorry for the bad writing, please forgive me! There may be a mistake, and I hope the bosses give pointers.