UseWith *Online Assistant
CD Label tool (2 CDs)
This tool highlights areas of the image where the color #D7D7D7 appears and lets you replace them with your own images.
old px ver
<![CDATA[
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Label Template Maker 2</title>
<style>
body {
font-family: Arial, sans-serif;
text-align: center;
}
.container2 {
display: flex;
flex-direction: column;
align-items: center;
margin-top: 20px;
}
.upload-buttons2 {
margin: 20px;
}
#canvas-container2 {
position: relative;
width: 210mm;
height: 297mm;
margin-top: 20px;
border: 1px solid #000;
}
.label2 {
position: absolute;
width: 117mm;
height: 117mm;
border: 1px solid #ccc;
overflow: hidden;
border-radius: 50%;
}
.label21 {
top: 21.5mm;
left: 46.5mm;
}
.label22 {
top: 158.5mm;
left: 46.5mm;
}
img {
width: 100%;
height: 100%;
object-fit: cover;
}
.button-container2 {
margin-top: 20px;
}
canvas {
display: none;
}
</style>
</head>
<body>
<h1>Label Template Maker 2</h1>
<div class="container2">
<div class="upload-buttons2">
<input type="file" id="image21" accept="image/*">
<input type="file" id="image22" accept="image/*">
</div>
<div id="canvas-container2">
<div id="label21" class="label2 label21">
<img id="img21" src="" alt="Label 21">
</div>
<div id="label22" class="label2 label22">
<img id="img22" src="" alt="Label 22">
</div>
</div>
<div class="button-container2">
<button id="download2">Download as Image</button>
</div>
<canvas id="finalCanvas2" width="793" height="1122"></canvas>
</div>
<script>
const imageInput21 = document.getElementById('image21');
const imageInput22 = document.getElementById('image22');
const img21 = document.getElementById('img21');
const img22 = document.getElementById('img22');
const downloadButton2 = document.getElementById('download2');
const finalCanvas2 = document.getElementById('finalCanvas2');
const ctx2 = finalCanvas2.getContext('2d');
function updateImage2(input2, imgElement2) {
const file2 = input2.files[0];
if (file2) {
const reader2 = new FileReader();
reader2.onload = function(event2) {
imgElement2.src = event2.target.result;
};
reader2.readAsDataURL(file2);
}
}
imageInput21.addEventListener('change', () => updateImage2(imageInput21, img21));
imageInput22.addEventListener('change', () => updateImage2(imageInput22, img22));
function drawCanvas2() {
ctx2.fillStyle = "#FFFFFF";
ctx2.fillRect(0, 0, finalCanvas2.width, finalCanvas2.height);
const mmToPx2 = 3.779527559;
const labelWidth2 = 117 * mmToPx2;
const labelHeight2 = 117 * mmToPx2;
const img21Element = document.getElementById('img21');
const label21X = 46.5 * mmToPx2;
const label21Y = 21.5 * mmToPx2;
if (img21Element.src) {
ctx2.save();
ctx2.beginPath();
ctx2.arc(
label21X + labelWidth2 / 2,
label21Y + labelHeight2 / 2,
labelWidth2 / 2,
0,
Math.PI * 2
);
ctx2.clip();
ctx2.drawImage(img21Element, label21X, label21Y, labelWidth2, labelHeight2);
ctx2.restore();
}
const img22Element = document.getElementById('img22');
const label22X = 46.5 * mmToPx2;
const label22Y = 158.5 * mmToPx2;
if (img22Element.src) {
ctx2.save();
ctx2.beginPath();
ctx2.arc(
label22X + labelWidth2 / 2,
label22Y + labelHeight2 / 2,
labelWidth2 / 2,
0,
Math.PI * 2
);
ctx2.clip();
ctx2.drawImage(img22Element, label22X, label22Y, labelWidth2, labelHeight2);
ctx2.restore();
}
}
downloadButton2.addEventListener('click', () => {
drawCanvas2();
const link2 = document.createElement('a');
link2.download = 'label-template2.png';
link2.href = finalCanvas2.toDataURL();
link2.click();
});
</script>
</body>
</html>
]]></plaintext></details></div></div>