Как изменить размер изображения в текстовом документе, созданном в формате HTML, сохраняя при этом соотношение сторон? ⇐ Html

[Anonymous]

Я создавал документ Word из HTML, следуя этим фантастическим ресурсам stackoverflow:

• Заголовок Office HTML Word
• Как использовать HTML для печати верхнего и нижнего колонтитула на каждой печатной странице документа?
• Созданный HTML документ Microsoft Word с заголовком, нижним колонтитулом и водяным знаком

Для тех, кто собирается попробовать Приготовьтесь к некоторой боли, поскольку Word, мягко говоря, неоднороден, когда дело касается CSS, с которым он работает. Если вам нужны столбцы, вам действительно нужно вернуться к использованию таблиц для размещения данных.

У меня возникли проблемы с правильным размером изображения - Есть изображения, загружаемые пользователем, которые будут использоваться в этом документе Word, и я хотел бы изменить их размер на основе свойства 'height' - до высоты 50 пикселей, а затем соответствующим образом масштабировать ширину.

Похоже, нет документацию о том, как это сделать где угодно в Интернете.

Я также использовал код html2canvas, чтобы превратить красивую гистограмму (на основе CSS) в изображение, которое затем можно использовать непосредственно в документе Word, как указано в превосходном http://www.kubilayerdogan.net/?p=304.

Это изображение плохо распечатывается, поэтому я планирую увеличить исходный HTML-код на экране. (скрыто в памяти) (с использованием jQuery) перед запуском кода html2canvas — таким образом у меня будет изображение большего размера, которое затем можно будет уменьшить в размере и получить более высокое значение DPI.

Во-первых, я узнал, что ширина и высота CSS не влияют на изображения в Word. Точно так же не работает следующее.

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

[img]http://improvedemployees.com/assets/teamstats/[/img]
');
jQuery(wordreport).find('.columncontainer').each(function() {
jQuery(this).children().wrapAll('');
});
// these were 3 columns on the screen - converted to a table and tds for Word
jQuery(wordreport).find('.memberstrengths').wrap('');
jQuery(wordreport).find('.membercommunication').wrap('');
jQuery(wordreport).find('.memberimproving').wrap('');

jQuery(wordreport).find('#generateword').remove();
jQuery(wordreport).find('script').remove();

var htmlpluscss = jQuery(wordreport).html();
htmlpluscss = '.reportsection {border:1px solid #fff!important; padding:0px; margin-bottom:0px;}' + htmlpluscss;
jQuery('#dochtml').val(htmlpluscss);
jQuery('#rawhtml').val(htmlpluscss);
jQuery('#stats').html2canvas({
onrendered: function (canvas) {
//Set hidden field's value to image data (base-64 string)
jQuery('#img_val').val(canvas.toDataURL("image/png"));
//Submit the form manually
document.getElementById("getword").submit();
}
});

Также этот HTML-код для кнопки для создания слова «документ»:

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

Подробнее здесь: [url]https://stackoverflow.com/questions/17686771/how-can-i-resize-an-image-in-an-html-generated-word-document-whilst-retaining-th[/url]