Graeme Lawrie
New member
Hello everyone. Racking my brain and I know I'm missing something simple.
I have a simple index.html and a supporting script.js this links to graemelawrie.co.uk which is my test server.
The page works fine in testing local, but for the life of me I cannot get it to work online.
Can anyone put me out of my misery? the site is live and not working
at Graemelawrie.co.uk
Html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Custom Image Generator</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 20px;
background-color: #f4f4f4;
display: flex;
justify-content: center;
}
.container {
background: #fff;
padding: 20px;
border-radius: 5px;
box-shadow: 0 0 10px rgba(0,0,0,0.1);
display: flex;
max-width: 800px;
}
.options {
flex: 1;
padding-right: 20px;
}
.graphic {
flex: 1;
text-align: center;
}
label, .explanation {
margin-top: 10px;
display: block;
color: #333;
}
input[type="number"], input[type="text"], select, input[type="color"], input[type="file"] {
padding: 10px;
margin-top: 5px;
border-radius: 5px;
border: 1px solid #ddd;
width: calc(100% - 22px);
}
input[type="button"] {
background-color: #007bff;
color: white;
padding: 10px 15px;
border: none;
border-radius: 5px;
cursor: pointer;
margin-top: 10px;
}
input[type="button"]:hover {
background-color: #0056b3;
}
.form-section {
margin-bottom: 20px;
}
</style>
</head>
<body>
<div class="container">
<div class="options">
<h2>Options</h2>
<form id="variableForm">
<div class="form-section">
<label for="variable1">Select Variable 1:</label>
<select id="variable1">
<option value="explore">Explore</option>
<option value="deepen">Deepen</option>
<option value="apply">Apply</option>
<option value="teach">Teach</option>
<option value="lead">Lead</option>
</select>
<span class="explanation">Choose the first variable to influence the background image.</span>
</div>
<div class="form-section">
<label for="variable2">Select Variable 2:</label>
<select id="variable2">
<option value="informal">Informal</option>
<option value="training">Training</option>
<option value="certified">Certified</option>
<option value="membership">Membership</option>
<option value="qualification">Qualification</option>
</select>
<span class="explanation">Choose the second variable to further refine the background image choice.</span>
</div>
<div class="form-section">
<label for="overlayText">Overlay Text (Line 1):</label>
<input type="text" id="overlayText" placeholder="Enter overlay text">
<span class="explanation">Enter the first line of text you want to overlay on the image.</span>
</div>
<div class="form-section">
<label for="overlayText2">Overlay Text (Line 2):</label>
<input type="text" id="overlayText2" placeholder="Enter second line of text">
<span class="explanation">Enter the second line of text to display below the first line.</span>
</div>
<div class="form-section">
<label for="overlayText3">Overlay Text (Line 3):</label>
<input type="text" id="overlayText3" placeholder="Enter third line of text">
<span class="explanation">Enter the third line of text to display below the second line.</span>
</div>
<div class="form-section">
<label for="textPosY">Text Vertical Position (px):</label>
<input type="number" id="textPosY" value="260">
<span class="explanation">Adjust the vertical position of your text on the image.</span>
</div>
<div class="form-section">
<label for="textColour">Text Colour:</label>
<input type="color" id="textColour" value="#000000">
<span class="explanation">Choose the colour of your overlay text.</span>
</div>
<div class="form-section">
<label for="logoUpload">Upload Logo:</label>
<input type="file" id="logoUpload" accept="image/*">
<span class="explanation">Upload a logo to display on the image. PNG or JPEG recommended.</span>
</div>
<div class="form-section">
<label for="logoPosY">Logo Vertical Position (px):</label>
<input type="number" id="logoPosY" value="50">
<span class="explanation">Adjust the vertical position of your logo on the image.</span>
</div>
<input type="button" value="Generate" onclick="generateImage()">
</form>
</div>
<div class="graphic">
<h2>Graphic</h2>
<canvas id="imageCanvas" width="400" height="400" style="border: 1px solid #ddd;"></canvas>
</div>
</div>
<script src="script.js"></script>
</body>
</html>
And my script:
function generateImage() {
const variable1 = document.getElementById('variable1').value;
const variable2 = document.getElementById('variable2').value;
const overlayText = document.getElementById('overlayText').value;
const overlayText2 = document.getElementById('overlayText2').value;
const overlayText3 = document.getElementById('overlayText3').value;
const textPosY = parseInt(document.getElementById('textPosY').value, 10);
const textColour = document.getElementById('textColour').value;
const logoPosY = parseInt(document.getElementById('logoPosY').value, 10);
const logoUpload = document.getElementById('logoUpload').files[0];
const canvas = document.getElementById('imageCanvas');
const ctx = canvas.getContext('2d');
const image = new Image();
image.onload = function() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.drawImage(image, 0, 0, canvas.width, canvas.height);
// Center text horizontally
ctx.font = '20px Arial';
ctx.fillStyle = textColour;
ctx.textAlign = 'center'; // Center the text horizontally
ctx.fillText(overlayText, canvas.width / 2, textPosY);
ctx.fillText(overlayText2, canvas.width / 2, textPosY + 30); // Adjust vertical spacing
ctx.fillText(overlayText3, canvas.width / 2, textPosY + 60); // Adjust vertical spacing
if (logoUpload) {
const reader = new FileReader();
reader.onload = function(e) {
drawLogo(ctx, e.target.result, logoPosY);
};
reader.readAsDataURL(logoUpload);
}
};
image.src = selectImage(variable1, variable2);
}
function selectImage(variable1, variable2) {
return `${variable1}_${variable2}.png`;
}
function drawLogo(ctx, logoImage, posY) {
const logo = new Image();
logo.onload = function() {
// Adjust logo size and center it horizontally
const scaledWidth = logo.width / 2;
const scaledHeight = logo.height / 2;
const posX = (ctx.canvas.width - scaledWidth) / 2;
ctx.drawImage(logo, posX, posY, scaledWidth, scaledHeight);
};
logo.src = logoImage;
}// JavaScript Document
I have a simple index.html and a supporting script.js this links to graemelawrie.co.uk which is my test server.
The page works fine in testing local, but for the life of me I cannot get it to work online.
Can anyone put me out of my misery? the site is live and not working
at Graemelawrie.co.ukHtml
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Custom Image Generator</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 20px;
background-color: #f4f4f4;
display: flex;
justify-content: center;
}
.container {
background: #fff;
padding: 20px;
border-radius: 5px;
box-shadow: 0 0 10px rgba(0,0,0,0.1);
display: flex;
max-width: 800px;
}
.options {
flex: 1;
padding-right: 20px;
}
.graphic {
flex: 1;
text-align: center;
}
label, .explanation {
margin-top: 10px;
display: block;
color: #333;
}
input[type="number"], input[type="text"], select, input[type="color"], input[type="file"] {
padding: 10px;
margin-top: 5px;
border-radius: 5px;
border: 1px solid #ddd;
width: calc(100% - 22px);
}
input[type="button"] {
background-color: #007bff;
color: white;
padding: 10px 15px;
border: none;
border-radius: 5px;
cursor: pointer;
margin-top: 10px;
}
input[type="button"]:hover {
background-color: #0056b3;
}
.form-section {
margin-bottom: 20px;
}
</style>
</head>
<body>
<div class="container">
<div class="options">
<h2>Options</h2>
<form id="variableForm">
<div class="form-section">
<label for="variable1">Select Variable 1:</label>
<select id="variable1">
<option value="explore">Explore</option>
<option value="deepen">Deepen</option>
<option value="apply">Apply</option>
<option value="teach">Teach</option>
<option value="lead">Lead</option>
</select>
<span class="explanation">Choose the first variable to influence the background image.</span>
</div>
<div class="form-section">
<label for="variable2">Select Variable 2:</label>
<select id="variable2">
<option value="informal">Informal</option>
<option value="training">Training</option>
<option value="certified">Certified</option>
<option value="membership">Membership</option>
<option value="qualification">Qualification</option>
</select>
<span class="explanation">Choose the second variable to further refine the background image choice.</span>
</div>
<div class="form-section">
<label for="overlayText">Overlay Text (Line 1):</label>
<input type="text" id="overlayText" placeholder="Enter overlay text">
<span class="explanation">Enter the first line of text you want to overlay on the image.</span>
</div>
<div class="form-section">
<label for="overlayText2">Overlay Text (Line 2):</label>
<input type="text" id="overlayText2" placeholder="Enter second line of text">
<span class="explanation">Enter the second line of text to display below the first line.</span>
</div>
<div class="form-section">
<label for="overlayText3">Overlay Text (Line 3):</label>
<input type="text" id="overlayText3" placeholder="Enter third line of text">
<span class="explanation">Enter the third line of text to display below the second line.</span>
</div>
<div class="form-section">
<label for="textPosY">Text Vertical Position (px):</label>
<input type="number" id="textPosY" value="260">
<span class="explanation">Adjust the vertical position of your text on the image.</span>
</div>
<div class="form-section">
<label for="textColour">Text Colour:</label>
<input type="color" id="textColour" value="#000000">
<span class="explanation">Choose the colour of your overlay text.</span>
</div>
<div class="form-section">
<label for="logoUpload">Upload Logo:</label>
<input type="file" id="logoUpload" accept="image/*">
<span class="explanation">Upload a logo to display on the image. PNG or JPEG recommended.</span>
</div>
<div class="form-section">
<label for="logoPosY">Logo Vertical Position (px):</label>
<input type="number" id="logoPosY" value="50">
<span class="explanation">Adjust the vertical position of your logo on the image.</span>
</div>
<input type="button" value="Generate" onclick="generateImage()">
</form>
</div>
<div class="graphic">
<h2>Graphic</h2>
<canvas id="imageCanvas" width="400" height="400" style="border: 1px solid #ddd;"></canvas>
</div>
</div>
<script src="script.js"></script>
</body>
</html>
And my script:
function generateImage() {
const variable1 = document.getElementById('variable1').value;
const variable2 = document.getElementById('variable2').value;
const overlayText = document.getElementById('overlayText').value;
const overlayText2 = document.getElementById('overlayText2').value;
const overlayText3 = document.getElementById('overlayText3').value;
const textPosY = parseInt(document.getElementById('textPosY').value, 10);
const textColour = document.getElementById('textColour').value;
const logoPosY = parseInt(document.getElementById('logoPosY').value, 10);
const logoUpload = document.getElementById('logoUpload').files[0];
const canvas = document.getElementById('imageCanvas');
const ctx = canvas.getContext('2d');
const image = new Image();
image.onload = function() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.drawImage(image, 0, 0, canvas.width, canvas.height);
// Center text horizontally
ctx.font = '20px Arial';
ctx.fillStyle = textColour;
ctx.textAlign = 'center'; // Center the text horizontally
ctx.fillText(overlayText, canvas.width / 2, textPosY);
ctx.fillText(overlayText2, canvas.width / 2, textPosY + 30); // Adjust vertical spacing
ctx.fillText(overlayText3, canvas.width / 2, textPosY + 60); // Adjust vertical spacing
if (logoUpload) {
const reader = new FileReader();
reader.onload = function(e) {
drawLogo(ctx, e.target.result, logoPosY);
};
reader.readAsDataURL(logoUpload);
}
};
image.src = selectImage(variable1, variable2);
}
function selectImage(variable1, variable2) {
return `${variable1}_${variable2}.png`;
}
function drawLogo(ctx, logoImage, posY) {
const logo = new Image();
logo.onload = function() {
// Adjust logo size and center it horizontally
const scaledWidth = logo.width / 2;
const scaledHeight = logo.height / 2;
const posX = (ctx.canvas.width - scaledWidth) / 2;
ctx.drawImage(logo, posX, posY, scaledWidth, scaledHeight);
};
logo.src = logoImage;
}// JavaScript Document
