I need your help! I am trying to convert an image and a text component (dynamic based on user input) to an image. How can I do that?
I have these components:
Input component with id: #inputText
Button component with id: #button
Image component with id: #imagebackground
Text component with id: #imagetext
Based on this I want to use Velo or other [wix.com] functionality to generate an image based on #imagebackground and #imagetext together in one image.
See image of how I envision the solution to look like.
Yes i can show you how to generate such functions on your own, but this for you will need JS-Knowledge.
You can take the following CODE and paste it into your HTML-Component, once you have added the HTML-Comp. onto your wished Wix-Page. Save the setup of your HTML-Component and publish your website.
Then you will open your page and test the component. It will show you a very simple setup, which will be capable to add → TEXT ← + → backgroundcolor ← + some kind of DRAWING-function (canvas).
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Simple Image Editor</title>
<style>
canvas {
border: 1px solid #000;
}
</style>
</head>
<body>
<canvas id="canvas" width="500" height="500"></canvas>
<label for="background-color">Background Color:</label>
<input type="color" id="background-color" value="#ffffff">
<br>
<label for="text">Text:</label>
<input type="text" id="text">
<button onclick="addText()">Add Text</button>
<script>
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
let isDrawing = false;
canvas.addEventListener('mousedown', startDrawing);
canvas.addEventListener('mousemove', draw);
canvas.addEventListener('mouseup', stopDrawing);
document.getElementById('background-color').addEventListener('input', changeBackground);
function startDrawing(event) {
isDrawing = true;
draw(event);
}
function draw(event) {
if (!isDrawing) return;
const x = event.offsetX;
const y = event.offsetY;
ctx.lineWidth = 5;
ctx.lineCap = 'round';
ctx.strokeStyle = '#000';
if (event.buttons === 1) {
ctx.beginPath();
ctx.moveTo(x, y);
ctx.lineTo(event.clientX, event.clientY);
ctx.stroke();
ctx.closePath();
}
}
function stopDrawing() {
isDrawing = false;
}
function changeBackground() {
const color = document.getElementById('background-color').value;
canvas.style.background = color;
}
function addText() {
const text = document.getElementById('text').value;
ctx.font = '30px Arial';
ctx.fillStyle = '#000';
ctx.fillText(text, 50, 50); // You can adjust the position of the text as needed
}
</script>
</body>
</html>
This is just a simple demo-setup, i have created for you.
You can take this example and expand it’s functionalities and connect it to your Wix-Website.
Once you have done everything, you will be able to add TEXT or change BACKGROUND-COLOR or BACKGROUND-IMAGE on your own.
You can add as much new features and functions on your own, since this your own custom created ELEMENT.
Now it will depend on you to complete the task and integrade the functions you need.
