Коллаж обрезается при печати ⇐ Html

[Anonymous]

У меня есть следующий код, где я создаю коллаж, а затем его можно сохранить как JPEG или распечатать. Проблема в том, что он не печатается или сохраняется должным образом. Я не уверен, что вызывает проблему. Прежде чем добавить изображения в коллаж, я могу распечатать их на размере A4, но когда изображения добавляются, коллажные растяжки и выходят из размера. >

Код: Выделить всё

let nextIndex = 0;

function uploadImages(event) {
const files = event.target.files;
// We now target all images inside wrappers
const collageImages = document.querySelectorAll('.collage-item');
for (let i = 0; i < files.length && nextIndex < collageImages.length; i++) {
const reader = new FileReader();
reader.onload = function(e) {
collageImages[nextIndex].src = e.target.result;
nextIndex++;
}
reader.readAsDataURL(files[i]);
}
}

function saveAsJPEG() {
const collage = document.getElementById('collage');
html2canvas(collage, {
scale: 2
}).then(canvas => {
const link = document.createElement('a');
link.href = canvas.toDataURL('image/jpeg', 1.0);
link.download = 'collage.jpeg';
link.click();
}).catch(error => {
console.error('Error saving collage as JPEG:', error);
});
}

function printCollage() {
const collage = document.getElementById('collage');
html2canvas(collage, {
scale: 2
}).then(canvas => {
const imgData = canvas.toDataURL('image/jpeg', 1.0);
const printWindow = window.open('', '_blank');
printWindow.document.write(`


Print Collage

@page { size: 210mm 297mm; margin: 0; }
body { margin: 0; }
img { width: 210mm; height: 290mm; }



[i]


`);
printWindow.document.close();
printWindow.onload = function() {
printWindow.print();
}
}).catch(error => {
console.error('Error printing collage:', error);
});
}

// When the first overlay text changes, update the others with ascending numbers
window.addEventListener('DOMContentLoaded', () => {
const overlays = document.querySelectorAll('.overlay-text');
if (overlays.length > 0) {
overlays[0].addEventListener('input', () => {
// Parse as number; if invalid, do nothing.
const baseValue = parseInt(overlays[0].value, 10);
if (!isNaN(baseValue)) {
overlays.forEach((input, index) =>  {
// For the first one, leave its value intact, then increment for others
input.value = (baseValue + index).toString();
});
}
});
}
});< /code>
body {
display: flex;
flex-direction: column;
align-items: center;
height: 100vh;
margin: 0;
padding: 0;
background-color: #f0f0f0;
/* Add slight gray background */
}

#collage-container {
display: flex;
align-items: flex-start;
/* Align items to the top */
margin-top: 20px;
}

#collage {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(3, 1fr);
width: calc(100vh * 0.707);
/* A4 aspect ratio */
height: calc(100vh - 40px);
/* Reduced height to fit within viewport */
gap: 5px;
border: 1px solid black;
background: white;
position: relative;
}

/* Wrap each collage item so we can position the text overlay */
.collage-item-wrapper {
position: relative;
width: 100%;
height: 100%;
}

.collage-item {
width: 100%;
height: 100%;
border: 1px solid #ddd;
object-fit: cover;
/* Ensure images cover the entire area without stretching */
display: block;
}

.overlay-text {
position: absolute;
bottom: 10px;
/* Increased bottom margin */
right: 5px;
width: 40px;
/* Adjust width as needed */
height: 25px;
/* Increased height */
padding: 2px;
background-color: white;
border: 1px solid #ccc;
text-align: center;
font-size: 12px;
/* Adjusted font size */
color: red;
font-weight: bold;
z-index: 10;
}

input[type="file"] {
display: none;
}

.btn-container {
display: grid;
grid-template-columns: 1fr;
gap: 20px;
align-items: center;
margin-left: 20px;
}

.btn-upload,
.btn-save,
.btn-print {
cursor: pointer;
padding: 10px;
background-color: #4CAF50;
color: white;
border: none;
border-radius: 5px;
width: 150px;
text-align: center;
font-size: 14px;
text-transform: uppercase;
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
transition: background-color 0.3s ease, transform 0.3s ease;
}

.btn-upload:hover,
.btn-save:hover,
.btn-print:hover {
background-color: #45a049;
transform: translateY(-2px);
}

.btn-upload:active,
.btn-save:active,
.btn-print:active {
background-color: #3e8e41;
transform: translateY(0);
}

.card {
background: #fff;
border-radius: 8px;
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
padding: 30px;
margin-left: 20px;
text-align: center;
}

.link {
margin-top: 40px;
font-size: 16px;
color: #4CAF50;
text-decoration: none;
}

.link:hover {
text-decoration: underline;
}

@media print {
@page {
size: 210mm 297mm;
/* A4 size */
margin: 0;
}

body {
margin: 0;
padding: 0;
}

#collage {
width: 210mm;
height: 290mm;
/* Reduced height to fit within print area */
/* Remove the gap for print so nothing is pushed out of bounds */
gap: 0;
box-sizing: border-box;
}

/* Force each grid cell to a fixed size so that the grid doesn't stretch */
#collage .collage-item-wrapper {
width: calc(210mm / 3);
height: calc(290mm / 3);
overflow: hidden;
box-sizing: border-box;
}

.card {
display:  none;
}
}< /code>






Collage 9 AUTO - AMARIGNA








[img]https://picsum.photos/300/200[/img]


[img]https://picsum.photos/300/200[/img]


[img]https://picsum.photos/300/200[/img]


[img]https://picsum.photos/300/200[/img]


[img]https://picsum.photos/300/200[/img]


[img]https://picsum.photos/300/200[/img]


[img]https://picsum.photos/300/200[/img]


[img]https://picsum.photos/300/200[/img]


[img]https://picsum.photos/300/200[/img]






[/i]Choose Images | ፖስተር አስገባ

[i]
[/i]Save as JPEG | ሴቭ አርግ
[i][/i]Print Collage | ፕሪንት አርግ

[url=https://t.me/lucyvideocenter]t.me/lucyvideocenter[/url]

Подробнее здесь: https://stackoverflow.com/questions/794 ... en-printed