search

tsayen / dom-to-image

Generates an image from a DOM node using HTML5 canvas
Other
10.28k stars 1.68k forks source link

Google Fonts not save in image #279

Open ezramod opened 5 years ago

ezramod commented 5 years ago

Hy, i use his script for save div to image, but font family is not apply to jpg/png, have solution to fix this?

my script work here: http://cani.magazin-jucariionline.ro/

GuiRitter commented 5 years ago

Same here, I get

Error while reading CSS rules from https://fonts.googleapis.com/css?family=Open+Sans:300,400,700&subset=cyrillic,cyrillic-ext,greek,greek-ext,latin-ext,vietnamese SecurityError: Failed to read the 'cssRules' property from 'CSSStyleSheet': Cannot access rules

I have a React web app and I'm loading Google's font like this:


import React, { Component } from 'react';

// ...

class C extends Component {

    // ...

    componentDidMount() {
        const fontLink = document.createElement('link');

        fontLink.href = 'https://fonts.googleapis.com/css?family=Open+Sans:300,400,700&subset=cyrillic,cyrillic-ext,greek,greek-ext,latin-ext,vietnamese';

        fontLink.rel = 'stylesheet';
        fontLink.type = 'text/css';

        document.body.appendChild(fontLink);

    }

    // ...

}

// ...

Other than that, awesome work!

Scratch that, I just realized that this doesn't generate a real SVG. If saved to a file and opened in a browser, it shows ok but, if opened in InkScape or GIMP, it's empty. Actually, GIMP managed to find an actual SVG that was in the middle of the DOM that I converted, but nothing of the other divs.

Scratch that, after much digging, I just realized that this does generate a real SVG, but not all SVG renderers are also HTML renderers, such as InkScape. I'd rather have a pure SVG, so I'll keep looking.

ezramod commented 5 years ago

i add crossorigin="anonymous" to stylesheet and now is saved

forthekill commented 4 years ago

I tried adding crossorigin="anonymous", and while it doesn't generate any console errors, it does not grab my stylesheets.

Abdullilah commented 4 years ago

@ezramod Do you have any idea if it's possible to add this to an Angular 2+ app, if yes could you please help me with it?

joshmg-77 commented 3 years ago

well!!! for me it works like this!!!

example

thanks ezramod for crossorigin="anonymous"

jpxwb commented 1 month ago

well!!! for me it works like this!!!

example

<link rel="preconnect" crossorigin="anonymous" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Indie+Flower&display=swap" rel="stylesheet" crossorigin="anonymous">

thanks ezramod for crossorigin="anonymous"

That fixed the issue for me too, thanks!