如何将HTML canvas作为图像发送？

Question

我希望能够复制这样的内容：https://via.placeholder.com/150

我有一些要放入URL的数据，并且响应是图像。我正在使用javascript获取在URL中传递的参数，然后构建HTML画布。我希望能够将该画布转换为图像并将其发送回作为响应。

/**
 *    Gets URL params
*/
function getUrlVars() {
    var vars = {};
    var parts = window.location.href.replace(/[?&]+([^=&]+)=([^&]*)/gi,                     function(m,key,value) {
    vars[key] = value;
});
return vars;
}

var fullName = decodeURIComponent(getUrlVars()["fullName"]);

var canvas = document.getElementById('canvas'),
ctx = canvas.getContext('2d');

function doCanvas() {
    /* draw something */
    ctx.fillStyle = '#f7f7f7';
    ctx.fillRect(0, 0, canvas.width, canvas.height);
    ctx.fillStyle = '#4b4f54';
    ctx.font = '12px sans-serif';
    ctx.fillText("Name: "+fullName, 10, 18);
}

/**
 * Draw something to canvas
 */
doCanvas();

画布效果很好，并且显示了我通过URL传递的数据。我仍然需要帮助弄清楚如何将该画布转换为图像并将其发送给URL的访问者，而不是发送给包含画布的页面。

我感谢任何有关如何实现此目标的想法。谢谢！

Answer 1

您可以在canvas元素上使用toDataURL方法从画布创建图像。然后，您可以将此图像发送到您正在使用的后端。

HTML范例

<canvas id="mycanvas">
<form action="SERVER_ROUTE_HERE" method="post" id="submit-canvas-form">
  <input type="hidden" name="canvas" id="canvas-image">
  <button>Submit Drawing</button>
</form>

JS

let mycanvas = document.getElementById("mycanvas");
let form = document.getElementById("submit-canvas-form");
let cvImage = document.getElementById("canvas-image");

form.onsubmit = (event) => {
    event.preventDefault();
    let image = mycanvas.toDataURL("image/png");
    cvImage.value = image;
    form.submit();
}