转换图像中的表单文本 - 画布

Question

我尝试创建一个简单的应用程序，将填充的数据从表单转换为图像。 例如：我有一个动态填充所有数据的表单。当我单击提交时，我想将填充字段的结果转换为图像。

我是否只能使用javascript，vue.js或做出反应？

示例：

• 此问题被视为重复，但我认为处理的其他问题并未解决与我相同的问题。 在动态填写表单后（用户键入并查看图像中的图像）以及将图像保存在其计算机上之后。然而，这是否可以在做出反应或仅仅是vue。

Answer 1

Canvas可用于以编程方式创建图像。

这可以使用react-canvas库轻松实现。

const ReactCanvas = require('react-canvas');
const Surface = ReactCanvas.Surface;
const Image = ReactCanvas.Image;
const Text = ReactCanvas.Text;
class MyComponent extends Component{
     render(){
       const surfaceWidth = window.innerWidth;
       const surfaceHeight = window.innerHeight;
       return(
          <Surface width={surfaceWidth} height={surfaceHeight} left={0} top{0}>
            <Text>
             Text Data from Your form component
            </Text>
          </Surface>
       )
     }
    }