Question:
Is there a particular app or automation that can help me create an automatic custom print? I’m trying to sell the same picture with custom names on it. Is there a plug in or app that can make that happen so someone just adds their name and it’s either created right away as a downloadable pdf or sent to s drop ship and printed and shipped?
Product:
Wix apps
What are you trying to achieve:
Is there a plug in or app that can make that happen so someone just adds their name and it’s either created right away as a downloadable pdf or sent to s drop ship and printed and shipped?
What have you already tried:
Looked online and tried to get help from Wix
Additional information:
[Include any other pertinent details or information that might be helpful for people to know when trying to answer your question.]
<!DOCTYPE html>
<html lang="en">
<head>
<title>Custom Print Example</title>
<style>
body {
font-family: Arial, sans-serif;
padding: 20px;
}
.container {
display: flex;
flex-direction: column;
align-items: center;
}
.form-group {
margin-bottom: 10px;
}
.button {
background-color: #4CAF50;
color: white;
padding: 10px 20px;
border: none;
border-radius: 5px;
cursor: pointer;
}
.button:hover {
background-color: #45a049;
}
#previewCanvas {
border: 1px solid #ccc;
}
</style>
</head>
<body>
<div class="container">
<h1>Create Your Custom Print</h1>
<div class="form-group">
<label for="customName">Enter Your Name:</label>
<input type="text" id="customName" placeholder="Enter your name">
</div>
<div class="form-group">
<label for="backgroundImage">Upload Background Image:</label>
<input type="file" id="backgroundImage" accept="image/*">
</div>
<button class="button" onclick="generatePreview()">Generate Preview</button>
<canvas id="previewCanvas" width="500" height="300"></canvas>
</div>
<script>
function generatePreview() {
const name = document.getElementById('customName').value;
const fileInput = document.getElementById('backgroundImage');
const canvas = document.getElementById('previewCanvas');
const ctx = canvas.getContext('2d');
// Clear the canvas
ctx.clearRect(0, 0, canvas.width, canvas.height);
// If a background image is uploaded, draw it on the canvas
if (fileInput.files && fileInput.files[0]) {
const reader = new FileReader();
reader.onload = function (e) {
const img = new Image();
img.src = e.target.result;
img.onload = function () {
ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
// Draw text with the custom name
ctx.font = '30px Arial';
ctx.textAlign = 'center';
ctx.fillStyle = 'white'; // Use white text for contrast
ctx.fillText("Welcome, " + name, canvas.width / 2, canvas.height / 2);
};
};
reader.readAsDataURL(fileInput.files[0]);
}
}
</script>
</body>
</html>