I’m trying to export div from html file to SVG image.
I’m using imported fonts.
It’s working except the fonts.
Maybe there is some specific way to import font in html-to-image?
The error text:
Access to fetch at ‘file:///…Raleway-Medium.ttf’ from origin ‘null’
has been blocked by CORS policy: Cross origin requests are only
supported for protocol schemes: http, data, isolated-app,
chrome-extension, chrome, https, chrome-untrusted.ET file:///…/Raleway-Medium.ttf net::ERR_FAILED
My code:
<head>
<style>
@font-face {
font-family: Raleway;
src: url("Raleway-Medium.ttf") format('truetype');
font-weight: 500;
font-style: normal;
}
#my-node {
font-family: "Raleway";
}
.myDiv {
padding: 2px;
border: 1px solid #bebdbd;
}
.myText {
font-size: 15px;
letter-spacing: 0.02em;
font-weight: 500;
}
</style>
</head>
<body>
<div id="my-node">
<div class="myDiv" style="top: 100px; left: 100px;">
<span class="myText">Here is some text</span>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html-to-image/1.11.11/html-to-image.js"></script>
<script type="text/javascript">
function filter(node) {
return (node.tagName !== 'i');
}
htmlToImage.toSvg(document.getElementById('my-node'), {filter: filter})
.then(function (dataUrl) {
let svg = decodeURIComponent(dataUrl.split(',')[1])
console.log(svg);
});
</script>
</body>