DOM要素を画像に変換しますか？

私はそれはあなたが非常に、非常に簡単にページに埋め込むことができ、base64で画像にDOM要素をオンにすることが可能です知っている：https://github.com/tsayen/dom-to-image DOM要素を画像に変換しますか？

しかし、DOMツー画像は恐ろしいフォントや素材のアイコンのようなフォントの問題を持っていますGoogleから。

Font AwesomeまたはGoogle's Material Icons

をアイコンは単純です：私はバグを提出した

<i class="material-icons">add</i>

あなたがここに見ることができるように生成された画像は、HTML要素や空の角からテキストを書くのいずれかこれについては、私はそれを行うための他の代替方法があるのだろうかと思っていたのですか？問題は、私はHTMLとしてこれらのアイコンを生成する "画像を生成する"が、実際の画像はデータベースの画像として保存する必要があります（明白な理由のためです）。したがって、ユーザーはこれらのDOM要素を生成することも、独自の画像を入力することもできます。

出典

2016-09-03 MortenMoulder

それはエラーが例の最適な設計とUnicodeのサポート

ためのCSSフォント-facedeclaracionesを使用して使用されるフォントのコピーを宣言しなければならないこともあり、すべてのDOMツーimage.js私はリンクが外部謝罪として発見理由そのための https://jsfiddle.net/sLc2kcwy/

<style type="text/css"> 
     body{background: url('assets/img/fondo.jpg') no-repeat;overflow: auto;color:#fff;padding: 0px;margin: 0px;} 


body { 
    background: #000; 
} 
.label { 
    display: inline-block; 
    width: 200px; 
    color: white; 
} 
#root { 
    display: inline-block; 
    width: 200px; 
    height: 300px; 
    text-align: center; 
    color: #ccc; 
    font-size: 20pt; 
    vertical-align: top; 
} 
#captured { 
    display: inline-block; 
    vertical-align: top; 
} 
.square { 
    display: block; 
    margin-top: 50px; 
    margin-left: 50px; 
    margin-bottom: 50px; 
    width: 100px; 
    height: 100px; 
    background: blue; 
    transform: rotate(45deg); 
} 


/* fallback */ 
@font-face { 
    font-family: 'Material Icons'; 
    font-style: normal; 
    font-weight: 400; 
    src: local('Material Icons'), local('MaterialIcons-Regular'), url(https://fonts.gstatic.com/s/materialicons/v17/2fcrYFNaTjcS6g4U3t-Y5ZjZjT5FdEJ140U2DJYC3mY.woff2) format('woff2'); 
} 

.material-icons { 
    font-family: 'Material Icons'; 
    font-weight: normal; 
    font-style: normal; 
    font-size: 24px; 
    line-height: 1; 
    letter-spacing: normal; 
    text-transform: none; 
    display: inline-block; 
    white-space: nowrap; 
    word-wrap: normal; 
    direction: ltr; 
    -webkit-font-feature-settings: 'liga'; 
    -webkit-font-smoothing: antialiased; 
} 
</style> 

</head> 
<body> 

<div id="root"> 
    <i class="material-icons">add</i> 
</div> 




<script type="text/javascript" src="assets/js/dom-to-image.js"></script> 

<script type="text/javascript"> 

    var node = document.getElementById('root'); 

     domtoimage.toPng(node) 
      .then(function (dataUrl) { 
       var img = new Image(); 
       img.src = dataUrl; 
       document.body.appendChild(img); 
      }) 
      .catch(function (error) { 
       console.error('oops, something went wrong!', error); 
    }); 
</script>

出典

2016-09-03 21:27:29

ああ、なんとなく。だから唯一の問題は、材料アイコン.cssを外部に読み込むことでしたか？ワオ。ありがとう、私はそれを推測していないでしょう。 – MortenMoulder

私はお手伝いします –

DOM要素を画像に変換しますか？

答えて

関連する問題