如何以编程方式生成浮雕文本图像？

Question

我正在尝试培训识别信用卡号码的分类器。以前我处理打印过的数字，我用FreeType生成了大量的训练样本。现在我正在处理浮雕类型，并坚持如何生成它们。

任何人都可以指向我一种方法来编程生成带有文字浮雕的图像（效果应该尽可能接近真实信用卡照片上的数字）？它可以是任何语言：C ++，MatLab，Python，CSS，SVG等。

理想效果（信用卡照片的一部分）：

PhotoShopped（使用斜角和浮雕效果，我想知道它的算法）：

Answer 1

您可以使用像Blender这样的3D软件包来生成具有大量不同光照条件和视角的样本图像而无需太多精力。这是我根据free credit card font制作的凹凸贴图：

这是一个简单的例子，您可以通过略微改变视角和照明条件来获得结果。通过更多的努力，您可以将反光镜面纹理应用于数字，并将照片纹理应用于卡片的其余部分。一旦你按照自己想要的方式设置了一个场景，就可以轻松地放入不同的照片纹理，并根据需要重复渲染过程。

Answer 2

您可以通过巧妙地使用css中的文本阴影属性来创建浮雕效果。 这是一个例子

<强> CSS

.emboss{
    background:#6d6d6d; /*same as font colour*/
    color:#6d6d6d; /*same as background colour*/
    font-size:4em;
    letter-spacing:0.05em;
    text-transform:uppercase;
    text-shadow: 1px 1px #ccc, -2px -1px #3d3d3d; two shadows, one in light gray ie ccc offset to the right and bottom, the second in a dark grey offset to the left and top - you should however adjust the colour depending on the background and font colour*/
    }

<强> HTML

<div class="emboss">
    9848 2369
</div>

选中此codepen link for a demo

Answer 3

通过为每个数字创建亮度图，您可以以低成本实现所需效果。我的意思是使用Photoshop在白色背景上渲染所有十个数字，将输出与你想要浮雕字符出现的背景图像相乘。

现在，如果你真的想以这种方式做到这一点，你也可以：

-1。生成具有笔划宽度2w，

的字符的高分辨率二进制渲染

-2。计算白色像素的欧几里德距离图（白色区域为0，黑色区域为0到w），

-3。计算每个像素的`sqrt（w ^ 2-（w-d）^ 2）。这将创建一个高度贴图，其中笔划显示为具有半圆形轮廓。

-4。在每个像素上应用一个简单的着色模型，例如Gouraud或Phong（使用表面法线的图像渐变，无限远的光线）。

这样您就可以自己创建亮度图。

您可以使用更复杂的轮廓功能来实现与卡平面的平滑连接。