У меня есть проект, в котором элемент SVG рисуется в форме радиолокационной карты.Рядом с радиолокационной диаграммой находятся HTML-таблицы с рассчитанными числами.Оба элемента представлены на определенной странице.Мне нужна кнопка загрузки, которая будет загружать файл PNG, в котором видны оба элемента.
На данный момент у меня есть эта кнопка загрузки, и она будет загружать элемент SVG как есть.Браузер автоматически загрузит файл PNG, и в этом файле PNG радиолокационная карта полностью видна.Это работает через функцию saveSvgAsPng exupero, которую можно найти здесь:
https://github.com/exupero/saveSvgAsPng
Это работает довольно хорошо.Он мгновенно загрузит изображение SVG.Я вызываю эту функцию с помощью следующего кода:
$('#cmd').click(function () {
saveSvgAsPng(document.getElementsByTagName("svg")[0], "filename.png", {scale: 2, backgroundColor: "#FFFFFF"});
});
Есть еще несколько функций, которые я мог бы использовать, например:
svgAsDataUri, which will create a promise
и
svgAsPngUri which also creates a promise
ПроблемаЯ понятия не имею, как работать с обещаниями.Я подумал, что смогу использовать эти обещания, чтобы получить радарчарт SVG, получить элементы HTML и собрать их в файл PNG, который будет загружен браузером, но не знаю, как это сделать.
Кто-нибудьМожет ли помочь мне получить как SVG, так и HTML-элементы в 1 PNG-файле?