resvg-nitro-demo

svg to image demo use resvg.js with nitro.js

How to start

git clone [email protected]:lizy0329-biubiubiu/resvg-nitro-demo.git
cd resvg-nitro-demo
pnpm i
pnpm dev

Send file

1. download the bruno client
2. set a post request(http://localhost:3000/api/genImageFormSvg) in bruno-client
3. upload text.svg in body tab
4. send!

the image is gen in your rootDir.

How to gen poster form client

// @cancidas/dom-to-svg was fixed the inlineResources error
import {documentToSVG, elementToSVG, inlineResources} from '@cancidas/dom-to-svg';

// html
<div
    id="poster-baba"
>
  <!-- render content -->
</div>

// script
const svgDocument = elementToSVG(document.getElementById('poster-baba'));
await inlineResources(svgDocument.documentElement);
const svgString = new XMLSerializer().serializeToString(svgDocument);
const blob = new Blob([svgString], {type: 'image/svg+xml'});

const formData = new FormData();
formData.append('file', blob, '测试demo');
await fetch('http://localhost:3000/api/genImageFormSvg', {
    method: 'POST',
    body: formData
});