Как объединить все элементы div в статическое изображение перед печатью? ⇐ Jquery

[Anonymous]

Я унаследовал проект, поэтому в нем используется много JavaScript и jquery, поэтому я не понимаю первоначальную цель, поэтому, пожалуйста, будьте терпеливы со мной, если возникнут дополнительные вопросы.
У меня есть инструмент, с помощью которого вы можете заменить изображение на карточке любым другим изображением по вашему желанию (через обрезку). Как только все будет иметь размер и расположение по вашему усмотрению, после нажатия кнопки «Печать» все элементы вернутся к тому виду, как они выглядят, без пользовательских стилей. Вот что пришлось сделать первоначальному разработчику:

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

    var frontPosition, backPosition;

window.onbeforeprint = function(event){

frontPosition = $(initial_image_front).position();
backPosition = $(initial_image_back).position();

if ( frontPosition.top > 0 ) {
$(initial_image_front).css({ top: frontPosition.top * 0.470588235 });
}
if ( frontPosition.top < 0 ) {
$(initial_image_front).css({ top: (-Math.abs(frontPosition.top) * 0.366863905) });
}
if ( frontPosition.left !== 0 ) {
$(initial_image_front).css({ left: 0 });
}

if ( backPosition.top > 0 ) {
$(initial_image_back).css({ top: backPosition.top * 0.470588235 });
}
if ( backPosition.top < 0 ) {
$(initial_image_back).css({ top: (-Math.abs(backPosition.top) * 0.366863905) });
}
if ( backPosition.left !== 0 ) {
$(initial_image_back).css({ left: backPosition.left * 0.59 });
}

};

window.onafterprint = function(event){

$(initial_image_front).css({ top: frontPosition.top, left: frontPosition.left });
$(initial_image_back).css({ top: backPosition.top, left: backPosition.left });

};

А вот соответствующий html:

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

FRONT











Change Photo

А вот до и после:



Кто я Предполагаю, что все элементы div организованы друг над другом, но я хочу сохранить стили, которые у нас были до отправки формы. Я бы хотел просто отключить все window.onbeforeprint и window.onafterprint, но я все равно получаю тот же результат, поэтому я думаю, что первоначальный разработчик устроил этот беспорядок, лол. Есть ли более простой способ распечатать мое изображение, чем настройка всего CSS после того, как оно уже было настроено??
Он использует попутный ветер, но, очевидно, есть много стилей, которые кажутся излишними , как встроенный, так и в импортированной таблице стилей. Я вернусь к этому как-нибудь в другой раз, если только это не будет очень важно для решения моей проблемы.
Изменить: добавить то, что я пробовал. Я последовал довольно многим ответам (например, CSS window.print() не загружается при предварительном просмотре печати), которые сначала импортируют мои таблицы стилей непосредственно в окно печати. Хотя он и импортирует эти таблицы стилей, стили по-прежнему совершенно неверны.

Подробнее здесь: https://stackoverflow.com/questions/789 ... e-printing