Chcę przekonwertować SVG na obrazy bitmapowe (takie jak JPEG, PNG itp.) Za pomocą JavaScript.
javascript
svg
Zain
źródło
źródło
Odpowiedzi:
Oto, jak możesz to zrobić za pomocą JavaScript:
źródło
toImage()
i takżedownload()
dla automatycznie pobranego obrazu.Rozwiązanie jbeard4 działało pięknie.
Korzystam z programu Raphael SketchPad, aby utworzyć plik SVG. Link do plików w kroku 1.
W przypadku przycisku Zapisz (identyfikator svg to „edytor”, identyfikator płótna to „canvas”):
źródło
<svg>...</svg
ale funkcja hquml () jquery nie dodaje tagu svg, więc ten kod działa dla mnie, ale musiałem edytować live canvg docanvg('canvas', '<svg>'+$("#editor").html()+'</svg>');
$(selector).html()
do rodzica elementu svg , zadziałahtml()
na opakowaniach ani ręcznie konstruowaćsvg
tagu nadrzędnego - który może nawet mieć atrybuty, które pomijasz podczas tego włamania. Wystarczy użyć$(svg_elem)[0].outerHTML
daje pełne źródło svg i jego zawartość. Tylko mówię ...Wydaje się, że działa to w większości przeglądarek:
źródło
.msToBlob()
Rozwiązanie do konwersji SVG na URL obiektu blob i URL obiektu blob do obrazu png
źródło
Napisałem tę klasę ES6, która wykonuje zadanie.
Oto jak z niego korzystasz
Jeśli chcesz waniliową wersję JavaScript, możesz udać się na stronę Babel i tam przetransportować kod.
źródło
Oto rozwiązanie po stronie serwera oparte na PhantomJS. Możesz użyć JSONP do wykonania połączenia między domenami do usługi obrazu:
https://github.com/vidalab/banquo-server
Na przykład:
http: // [host] /api/https%3A%2F%2Fvida.io%2Fdocuments%2FWgBMc4zDWF7YpqXGR/viewport_width=980&viewport_height=900&delay=5000&selector=%23canvas
Następnie możesz wyświetlić obraz z tagiem img:
Działa w różnych przeglądarkach.
źródło
zmień,
svg
aby dopasować swój elementźródło
Uncaught TypeError: Failed to execute 'serializeToString' on 'XMLSerializer': parameter 1 is not of type 'Node'.
Svg
dopng
konwersji w zależności od warunków:svg
jest w formacie ścieżki SVG (ciąg) :new Path2D()
i ustawsvg
jako parametrcanvas.toDataURL()
jakosrc
.przykład:
Zauważ, że
Path2D
nie obsługiwaneie
i częściowo obsługiwane w Edge. Polyfill rozwiązuje to: https://github.com/nilzona/path2d-polyfillsvg
kroplę i narysuj na płótnie, używając.drawImage()
:Ładny opis: http://ramblings.mcpher.com/Home/excelquirks/gassnips/svgtopng
Zauważ, że np. Otrzymasz wyjątek na etapie canvas.toDataURL (); Jest tak, ponieważ IE ma zbyt wysokie ograniczenia bezpieczeństwa i traktuje płótno jako tylko do odczytu po narysowaniu tam obrazu. Wszystkie inne przeglądarki ograniczają tylko wtedy, gdy obraz ma pochodzenie krzyżowe.
canvg
biblioteki JavaScript. Jest to osobna biblioteka, ale ma przydatne funkcje.Lubić:
źródło
Niedawno odkryłem kilka bibliotek śledzenia obrazów dla JavaScript, które rzeczywiście są w stanie stworzyć akceptowalne przybliżenie mapy bitowej, zarówno pod względem wielkości, jak i jakości. Tworzę tę bibliotekę JavaScript i interfejs CLI:
https://www.npmjs.com/package/svg-png-converter
Który zapewnia ujednolicony interfejs API dla wszystkich, obsługujący przeglądarkę i węzeł, w zależności od modelu DOM, oraz narzędzie wiersza poleceń.
Do konwersji logo / kreskówek / podobnych obrazów wykonuje doskonałą robotę. W przypadku zdjęć / realizmu potrzebne są pewne poprawki, ponieważ rozmiar wyjściowy może znacznie wzrosnąć.
Ma plac zabaw, chociaż teraz pracuję nad lepszym, łatwiejszym w użyciu, ponieważ dodano więcej funkcji:
https://cancerberosgx.github.io/demos/svg-png-converter/playground/#
źródło