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

[Anonymous]

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

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

let nextIndex = 0;

function uploadImages(event) {
const files = event.target.files;
const collageItems = document.querySelectorAll('.collage-item');

for (let i = 0; i < files.length && nextIndex < collageItems.length; i++) {
const reader = new FileReader();
reader.onload = function(e) {
collageItems[nextIndex].src = e.target.result;
nextIndex++;
}
reader.readAsDataURL(files[i]);
}
}

function saveAsJPEG() {
const collage = document.getElementById('collage');
html2canvas(collage).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).then(canvas => {
const imgData = canvas.toDataURL('image/jpeg', 1.0);
const printWindow = window.open('', '_blank');
printWindow.document.write(`


Print Collage

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



[i]


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

function addTextBox() {
const collage = document.getElementById('collage');
const textBox = document.createElement('div');
textBox.className = 'text-box';
textBox.contentEditable = true;
textBox.innerText = '';  // Remove default text
collage.appendChild(textBox);

makeElementDraggable(textBox);
}

function makeElementDraggable(element) {
let offsetX, offsetY;
element.onmousedown = function(event) {
offsetX = event.clientX - parseInt(window.getComputedStyle(element).left);
offsetY = event.clientY - parseInt(window.getComputedStyle(element).top);
document.onmousemove = function(event) {
element.style.left = (event.clientX - offsetX) + 'px';
element.style.top = (event.clientY - offsetY) + 'px';
}
document.onmouseup = function() {
document.onmousemove = null;
document.onmouseup = null;
}
}
}< /code>
body {
display: flex;
flex-direction: column;
align-items: center;
margin: 0;
padding: 0;
background-color: #f0f0f0;
}

#collage-container {
display: flex;
align-items: flex-start;
margin-top: 20px;
}

#collage {
display: grid;
grid-template-columns: repeat(3, 70mm);
grid-template-rows: repeat(3, 99mm);
width: 210mm;
height: 297mm;
gap: 0;
border: 1px solid black;
background: white;
position: relative;
margin: 0;
padding: 0;
overflow: hidden;
}

.collage-item {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}

@media print {
@page {
size: A4;
margin: 0;
}

body {
margin: 0;
padding: 0;
}

#collage {
width: 210mm;
height: 297mm;
overflow: hidden;
}

.card,
.btn-container,
.link {
display: none;
}
}< /code>






Collage






[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]Add Text | ጽሁፍ አስገባ
[i][/i]Save as JPEG | ሴቭ አርግ
[i][/i]Print Collage | ፕሪንት አርግ

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