He estado buscando por todas partes un marco Javascript o cualquier código JS que me permita crear una imagen JPG o PNG sobre la marcha, pero parece que no puedo encontrar ninguna. Necesito crear una imagen usando un color de fondo seleccionado, palabras de texto ingresadas por el usuario, una fuente seleccionada y luego un color de texto seleccionado. Una vez que se crea la imagen, necesito agregarla a la página del formulario HTML actual y luego pasar la imagen a mi servidor cuando se envía el formulario. Pero todo lo que encuentro es material para manipular una imagen existente, entonces, ¿es posible mi solicitud?
Sé que puedo crear una imagen y agregarla a una página existente usando algo como lo siguiente:
$('#container').append($('<img>', { src : "/path/to/image.jpg", width : 16, height : 16, alt : "Test Image", title : "Test Image" }));O....
var img = document.createElement('img'); img.src = 'my_image.jpg'; document.getElementById('container').appendChild(img);Pero ambas opciones requieren el uso de una imagen existente... Necesito poder crear completamente una nueva imagen desde cero.
Aquí hay un ejemplo simple de dibujar en un lienzo oculto y luego copiar los datos de la imagen resultante en un elemento de imagen. Una vez que se crea este elemento, se puede copiar, guardar, etc.
Un recurso útil para Canvas API está aquí: https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API
Y hay un tutorial aquí: 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>Puede crear una nueva imagen desde cero usando JavaScript Canvas.
Algo como esto:
<canvas id=canvas width=500 height=500></canvas> <script> window.onload = function() { const canvas = document.getElementById("canvas"); const ctx = canvas.getContext("2d"); // This fills the background ctx.fillStyle = "green"; ctx.fillRect(0, 0, 500, 500); // Add text with spesific font ctx.font = 'bold 48px serif'; ctx.strokeText('Made on Fly!', 50, 100); // Make canvas to data URI const dataUrl = canvas.toDataURL("image/png"); // Here you can convert dataUrl to base64 and use it for other purposes const aDoc = document.createElement("a"); aDoc.href = dataUrl; aDoc.download = "Made_on_fly.png"; document.body.appendChild(aDoc); // Make a element click for download aDoc.click(); } </script>