js将文字生成图片

function textToImage(text, font, color, width, height) {
    const canvas = document.createElement('canvas');
    canvas.width = width;
    canvas.height = height;
    const ctx = canvas.getContext('2d');
    ctx.font = font;
    ctx.fillStyle = color;
    ctx.fillText(text, 10, height / 2 + parseInt(font, 10) / 2);
    return canvas.toDataURL('image/png');
}

// 使用示例
const imageUrl = textToImage('Hello World', '30px Arial', 'red', 300, 100);
const imgElement = document.createElement('img');
imgElement.src = imageUrl;
document.body.appendChild(imgElement);

function textToSvgImage(text, font, color, width, height) {
    const svg = `<svg xmlns="http://www.w3.org/2000/svg" width="${width}" height="${height}"><text x="0" y="${height / 2 + parseInt(font, 10) / 2}" font-family="${font}" font-size="${font}" fill="${color}">${text}</text></svg>`;
    const base64 = btoa(unescape(encodeURIComponent(svg)));
    return `data:image/svg+xml;base64,${base64}`;
}

// 使用示例
const svgImageUrl = textToSvgImage('Hello World', '30px Arial', 'blue', 300, 100);
const svgImgElement = document.createElement('img');
svgImgElement.src = svgImageUrl;
document.body.appendChild(svgImgElement);