javascript 使用字体、背景和文本颜色从文本创建图像

Question

我一直在寻找 Javascript 框架或任何 JS 代码，可以让我动态创建 JPG 或 PNG 图像，但我似乎找不到任何。我需要使用选定的背景颜色、用户输入的文本单词、选定的字体和选定的文本颜色来创建图像。创建图像后，我需要将其添加到当前的 HTML 表单页面，然后在提交表单时将图像传递到我的服务器。但我发现的只是操纵现有图像的东西，那么我的要求是否可能？

我知道我可以创建一个图像并将其附加到现有页面，使用类似以下内容：

$('#container').append($('<img>', { 
    src : "/path/to/image.jpg", 
    width : 16, 
    height : 16, 
    alt : "Test Image", 
    title : "Test Image"
}));

或者....

var img = document.createElement('img');
img.src = 'my_image.jpg';
document.getElementById('container').appendChild(img);

但这两个选项都需要使用现有图像......我需要能够从头开始完全创建一个新图像。

Answer 1

以下是绘制到隐藏画布，然后将生成的图像数据复制到图像元素的简单示例。一旦创建了该元素，就可以对其进行复制、保存等。

Canvas API 的有用资源如下： https: //developer.mozilla.org/en-US/docs/Web/API/Canvas_API

教程在这里： https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial

function drawHelloWorld(canvas) {
    const ctx = canvas.getContext("2d");
    
    // Draw the background
    ctx.rect(0, 0, 250, 100);
    ctx.fillStyle = "green";
    ctx.fill();
 
    // Draw the text
    ctx.font = "30px Helvetica";
    ctx.fillStyle = "ghostwhite";
    ctx.fillText("Hello World", 50, 60);
}

const canvas = document.getElementById('myCanvas');
drawHelloWorld(canvas);

const imgElement = document.createElement('img');
imgElement.src = canvas.toDataURL('image/jpeg');
document.getElementById('container').appendChild(imgElement);

<canvas hidden id="myCanvas" width="250" height="100" style="border:1px solid #d3d3d3;">
</canvas>

<div id="container">
</div>