JS将文字签名转透明背景的图片

寒寒_2024-04-21 20:45

要将文本转换为图片，可以使用Canvas API。以下是一个简单的示例，展示了如何将文本绘制到画布上，并将其转换为图片。

1. html 版本

html

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Text to Image</title>
</head>
<body>
    <input type="text" id="textInput" placeholder="请输入文本">
    <button onclick="convertToImage()">转换为图片</button>
    <img id="imageOutput" width="100" height="100">

    <script src="script.js"></script>
</body>
</html>

script.js

javascript 复制代码

function convertToImage() {
    // 获取输入框的文本
    const text = document.getElementById('textInput').value;

    // 创建一个新的Canvas元素，用于绘制文本
    const canvas = document.createElement('canvas');
    // 背景设置成透明
    canvas.style.background = 'rgba(255, 255, 255, 0)'
    canvas.width = 120;
    canvas.height = 60;

    // 获取Canvas的2D绘图上下文
    const ctx = canvas.getContext('2d');

    // 将文本绘制到画布上
    ctx.font = '24px Arial';
    ctx.fillStyle = 'black';

    ctx.fillText(text, 25, 40);

    // 将画布转换为图片并显示
    const imgData = canvas.toDataURL('image/png');
    document.getElementById('imageOutput').src = imgData;
}

2. 纯JS 版

javascript 复制代码

convertToImage(text) {
    // 创建一个新的Canvas元素，用于绘制文本
    const canvas = document.createElement('canvas');
    canvas.style.background = 'rgba(255, 255, 255, 0)'
    canvas.width = 120;
    canvas.height = 60;

    // 获取Canvas的2D绘图上下文
    const ctx = canvas.getContext('2d');

    // 将文本绘制到画布上
    ctx.font = '24px Arial';
    ctx.fillStyle = 'black';

    ctx.fillText(text, 25, 40);

    // 将画布转换为图片并显示
    const imgData = canvas.toDataURL('image/png');
    return imgData
}