javascript - How to generate stroked fonts and save them as pictures, using canvas or php?

The size of the stroke can be set

1. At present, the QR code is automatically generated in the background, and the text is also automatically generated. I have integrated it in the center of the picture using css

<code>代码结构如下:
<link href="print.css" rel="stylesheet"  media="print">
<div>
    <img src="" />
    <span class="font-border">我是描边字体</span>
</div>    </code>

The style of print.css is as follows:

<code>.font-border{
    text-shadow: 0 0 6px #fff,0 0 6px #fff,0 0 6px #fff,0 0 6px #fff,0 0 6px #fff,0 0 6px #fff,0 0 6px #fff,0 0 6px #fff,0 0 6px #fff,0 0 6px #fff,0 0 6px #fff,0 0 6px #fff,0 0 6px #fff,0 0 6px #fff;

}    </code>

The final style also has a stroke effect, but after clicking print, the stroke style disappears (Google Chrome version 52.0.2743.60 (64-bit))
Is it that printing does not support text-shadow?

2. Later I found http://www.liantu.com/ and found that they use canvas to integrate pictures and text.
But they encrypted it, and after decrypting it, it couldn’t be read. The variables were all single letters.
Can I use canvas to directly wrap the pictures and text elements I set above and their positions? Then I clicked download and downloaded the pictures directly to the local

3. Or is there any php plug-in that can be used to achieve strokes?

Reply content:

The size of the stroke can be set

1. At present, the QR code is automatically generated in the background, and the text is also automatically generated. I have integrated it in the center of the picture using css

<code>代码结构如下:
<link href="print.css" rel="stylesheet"  media="print">
<div>
    <img src="" />
    <span class="font-border">我是描边字体</span>
</div>    </code>

The style of print.css is as follows:

<code>.font-border{
    text-shadow: 0 0 6px #fff,0 0 6px #fff,0 0 6px #fff,0 0 6px #fff,0 0 6px #fff,0 0 6px #fff,0 0 6px #fff,0 0 6px #fff,0 0 6px #fff,0 0 6px #fff,0 0 6px #fff,0 0 6px #fff,0 0 6px #fff,0 0 6px #fff;

}    </code>

The final style also has a stroke effect, but after clicking print, the stroke style disappears (Google Chrome version 52.0.2743.60 (64-bit))
Is it that printing does not support text-shadow?

2. Later I found http://www.liantu.com/ and found that they use canvas to integrate pictures and text.
But they encrypted it, and after decrypting it, it couldn’t be read. The variables were all single letters.
Can I use canvas to directly wrap the pictures and text elements I set above and their positions? Then I clicked download and downloaded the pictures directly to the local

3. Or is there any php plug-in that can be used to achieve strokes?

Draw pictures onto canvas, and the same goes for text. canvas supports text strokes.

Example:
https://jsfiddle.net/imys/yjhs8rz4/

php to generate font images, stroke fonts are related to font files