Получите размер графики SVG JavaScript
Мне удалось заставить мою загрузку работать, используя пример функции обработчика загрузки, размещенной на LeafletMaps здесь: Почему webshot не работает с листовками в R блестящий? как показано ниже: Решение, приведенное по ссылке, похоже, объединяет решения, которые я пытался реализовать в своем первоначальном посте. Единственная проблема заключается в том, что он не работает, когда приложение развернуто на глянцевом.io library(shiny)
library(htmlwidgets)
library(webshot)
library(wordcloud2)
#webshot::install_phantomjs()
ui <- shinyUI(fluidPage(mainPanel(
wordcloud2Output("wordcl"),
downloadButton(outputId = "savecloud")
)))
server <- shinyServer(function(input, output, session) {
wordcl <- reactive ({
wordcloud2(demoFreq, color = "random-light", backgroundColor = "grey")
})
output$wordcl <- renderWordcloud2({
wordcl()
})
output$savecloud <- downloadHandler(
filename = paste("wordcloud", '.png', sep=''),
content = function(file) {
owd <- setwd(tempdir())
on.exit(setwd(owd))
saveWidget(wordcl(), "temp.html", selfcontained = FALSE)
webshot("temp.html", delay =15, file = file, cliprect = "viewport")
})
})
shinyApp(ui = ui, server = server)
2 ответа
> Там какой-либо путь состоит в том, чтобы получить размер svg при помощи JavaScript?
Нет и да.
Нет:
JavaScript не сможет получить доступ к содержанию файла SVG, которое находится в браузере.
Таким образом, не было бы возможно иметь страницу, содержащую произвольное изображение SVG и затем иметь JavaScript, определяют что-либо из самого файла SVG.
Единственные данные JS может получить доступ к нему, это содержало в DOM страницы: исходная разметка плюс любые модификации JS-related к DOM. Вы могли получить доступ object атрибуты элемента и порожденные узлы, но это не даст Вам видимость чего-то большего чем что Вы видите, смотрите ли Вы на разметку страницы сами.
Да:
JS (в современных браузерах) может проанализировать любую строку XML в DOM и затем получить доступ к довольному использующие основанные на DOM методы.
Вы могли получить содержание файла SVG путем издания запроса xmlHttpRequest-стиля (т.е. JS работает, HTTP Входят в URL файла SVG). JS затем имел бы полную строку XML файла SVG, и можно затем получить доступ к чему-либо, что Вы любите.
> Или возможно я должен просто посмотреть на svg XML-файл для обнаружения размера от вершины svg тег?
Это было бы более выполнимо безусловно.
Единственное основанное на JS решение потребовало бы, чтобы JS выполнил ПОЛУЧИТЬ запрос на URL файла SVG (как выше), который вряд ли будет выполним - каждая загрузка страницы могла бы привести к двойной загрузке каждый файл SVG, и парсинг XML SVG в DOM JS мог бы быть слишком интенсивно использующим ресурсы.
Наличие JS получают содержание XML SVG и анализируют, это в DOM для получения только размеров изображения является немного излишества. Это совершенно возможно, но обычно не практично.
Запросы серверной стороны содержания XML SVG, определение подходящей ширины и высоты и затем динамично добавление width и height атрибуты до возврата разметки к браузеру были бы Вашим лучшим выбором.
См. http://dev.opera.com/articles/view/svg-evolution-not-revolution/?page=2
Можно получить доступ к SVG DOM, на который ссылается объект HTML:, пока файл SVG находится в том же домене (в противном случае это может быть уязвимость системы безопасности. Если тег вашего объекта имеет id = "myobj", вы должны сделать:
var obj = document.getElementById("myobj"); // reference to the object tag
var svgdoc = obj.contentDocument; // reference to the SVG document
var svgelem = svgdoc.documentElement; // reference to the SVG element
Затем вы можете получить доступ к ширине / высоте элемента svg с помощью:
svgelem.getAttribute("width")
svgelem.getAttribute("height")
Обратите внимание, что эти атрибуты могут быть такими, как "100px", "300", "200em", "40mm", "100%", поэтому вам необходимо тщательно проанализировать его.