將DOM元素轉換爲圖像？

我知道這是可能把DOM元素融入的base64圖像，你可以嵌入到頁面上，非常，非常容易：https://github.com/tsayen/dom-to-image 將DOM元素轉換爲圖像？

然而，DOM對圖像與字體一樣字體真棒或材料圖標的問題來自Google。所生成的圖像無論是寫在HTML元素或空方的文字，你可以在這裏看到：

的圖標很簡單：

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

我已經提交了一個bug關於這一點，但我想知道是否有其他替代方法來做到這一點？問題是，我有一個「生成圖像」，它將這些圖標生成爲HTML，但我想要的實際圖像應該作爲圖像保存在數據庫中（原因很明顯）。因此，用戶可以生成這些DOM元素，也可以輸入自己的圖像。

來源

2016-09-03 MortenMoulder

它可能是錯誤必須聲明使用CSS字體facedeclaraciones在例如優化設計和Unicode支持

使用的字體複製所有的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元素轉換爲圖像？

回答

相關問題