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

要将文本转换为图片,可以使用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
}
相关推荐
keepquietl2 分钟前
MQTT示例体验(C)
c语言·开发语言
crary,记忆3 分钟前
Angular中Webpack与ngx-build-plus 浅学
前端·webpack·angular·angular.js
newxtc8 分钟前
【JJ斗地主-注册安全分析报告】
开发语言·javascript·人工智能·安全
程序猿小D17 分钟前
第22节 Node.js JXcore 打包
开发语言·人工智能·vscode·node.js·c#
小猫咪怎么会有坏心思呢24 分钟前
华为OD机试-最短木板长度-二分法(A卷,100分)
java·开发语言·华为od
wo32586614530 分钟前
浪潮交换机配置track检测实现高速公路收费网络主备切换NQA
开发语言·网络·php
知识中的海王35 分钟前
Python html 库用法详解
开发语言·python
烛阴36 分钟前
告别原生Cookie:js-cookie如何实现Cookie的优雅管理
前端·javascript
Allen Bright37 分钟前
【HTML-16】深入理解HTML中的块元素与行内元素
前端·html
前端卧龙人44 分钟前
受够了webpack的速度,我选择了vite重构vue2项目
前端