Canvg
Det finns tillfällen när man vill kunna ladda ner och spara alla de fina graferna som man har ritat på en webbsida. Tyvärr uppstår då ganska ofta ett problem då grafbiblioteken som används använder svg för att rita resultatet. Detta är ett vektorformat som stöds av alla moderna webbläsare, men som inte automatiskt konverteras till bitmap. För att lösa detta problem så finns det ett javascriptbibliotek som heter canvg som ritar svg-bilden i ett canvas-element i webbsidan vilket då gör den möjlig att ladda ner och spara (t.ex. genom att högerklicka på grafen och välja “Spara bild som…”).
Här är ett exempel på en svg-bild som automatiskt har konverterats:
Det enda man behöver göra är att:
- Inkludera tre javascriptbibliotek
- Ropa på javascript-funktionen
canvg();
Jag har upplevt problem med ramverket när jag försökte använda det tillsammans med chartist.js, gissningsvis eftersom de graferna verkar vara uppbyggda av flera semitransparenta svg:er ovanpå varandra. Det verkar inte vara ett helt felfritt bibliotek, men det uppvägs delvis av det enkla användningssättet. Det parameterlösa funktionsanropet till canvg() konverterar, helt automatiskt, alla svg:er på en hel sida och ersätter dem med motsvarande canvaselement. Lättare än så kan det inte bli.
Biblioteket har också andra spännande användningsområden, t.ex. att det kan användas som en reservlösning för att svg-rendering ska fungera på mobila klienter som saknar stöd för svg. Utvecklingen av ramverket verkar pågå fortfarande och i skrivande stund så ser jag den senaste aktiviteten i repositoriet för bara två timmar sedan. Dokumentationen är sparsmakad men täcker det man behöver veta (och biblioteket är inte precis omfattande till att börja med). Jag skulle säga att ett bibliotek som detta är värt att ta sig en titt på om man behöver en lösning för att kunna rendera och spara grafer och annan grafik som genereras med hjälp av d3.js, chart.js och andra liknande ramverk. Om slutresultatet av någon anledning inte är tillfredsställande så kan man i alla fall trösta sig med att testet kunde genomföras snabbt och smärtfritt.