Html2Canvas - SVG - FontFace

by Kris

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.5.0-beta3/html2canvas.svg.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.5.0-beta4/html2canvas.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.5.0-beta4/html2canvas.svg.min.js"></script>
<svg width="600" height="200" style="background-color:lightblue;">
  <text transform="translate(100, 100)" style="font-size:60px; font-family: 'Oswald'">Hello world</text>
</svg>

<br/>
<button id="createCanvasButton">Create canvas !</button>
<div id="isLoaded"></div>

</div>

CSS

@import url(//fonts.googleapis.com/css?family=Oswald);

JavaScript

function loadFont() {
  //(1)get css as a text.
  console.log('start load')
	const request = new XMLHttpRequest();
	request.open("get", "https://fonts.googleapis.com/css?family=Oswald");
	request.responseType = "text";
  request.send();
	request.onloadend = () => {
		
		//(2)find all font urls.
		let css = request.response;
		const fontURLs = css.match(/https?:\/\/[^ \)]+/g);
		let loaded = 0;
    console.log(fontURLs)
		fontURLs.forEach(url => {
			
			//(3)get each font binary.
			const request = new XMLHttpRequest();
			request.open("get", url);
			request.responseType = "blob";
			request.onloadend = () => {
				
				//(4)conver font blob to binary string.
				const reader = new FileReader();
				reader.onloadend = () => {
					//console.log(css)
					//(5)replace font url by binary string.
					css = css.replace(new RegExp(url), reader.result);
					loaded++;
					//check all fonts are replaced.
					if(loaded == fontURLs.length){
          	console.log("22")
						$('svg').prepend(`<style>${css}</style>`);
            $('#isLoaded').append('font is loaded')
					}
				};
				reader.readAsDataURL(request.response);
			};
			request.send();
		});
	};
}	

loadFont();
$('#createCanvasButton').on('click', function() {
  html2canvas(document.body).then(function(canvas) {
    document.body.appendChild(canvas);
  });
});