2017-01-31 25 views
0

html2canvasを使用して画像を変換する次のコードがあります。これは、正常に動作しているが、html2canvasを使用して画像がドロップダウンアイコンで正しくキャプチャされない

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
\t <title>html2canvas</title> 
 
\t <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
 
\t <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
\t <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
\t <script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.min.js"></script> 
 
\t <style> 
 
\t \t button{ 
 
\t \t \t display:block; 
 
\t \t \t height:20px; 
 
\t \t \t margin-top:10px; 
 
\t \t \t margin-bottom:10px; 
 
\t \t } 
 
\t \t .icon-diamond:before { 
 
\t \t content: "\e943"; 
 
\t \t } 
 
\t </style> 
 
</head> 
 
<body> 
 
\t <div id="target"> 
 
\t \t <div style="position:relative;" class="noteclasscontainer" > 
 
\t \t <span style="font-size: 60px;" class="glyphicon">&#xe022; 
 

 
\t \t  <span style="color:white;font-size: 21px; position: absolute; top: 16px;left:10px;">dd</span> 
 
\t \t </span> 
 
\t \t </div> 
 
\t \t <div style="position:relative;" class="noteclasscontainer"> 
 
\t \t <select> 
 
\t \t <option>1</option> 
 
\t \t <option>1</option> 
 
\t \t </select> 
 
\t \t </div> 
 
\t </div> 
 
\t <button onclick="takeScreenShot()">to image</button> 
 
\t <script> 
 
\t \t window.takeScreenShot = function() { 
 
\t \t  html2canvas(document.getElementById("target"), { 
 
\t \t   onrendered: function (canvas) { 
 
\t \t    document.body.appendChild(canvas); 
 
\t \t   }, 
 
\t \t   width:320, 
 
\t \t   height:220 
 
\t \t  }); 
 
\t \t } 
 
\t </script> 
 
</body> 
 
</html>

画像をキャプチャ画像が正しくキャプチャされているが、唯一の選択アイコンを修正するためにproperly.howに来ていないときに(下矢印)selectタグのアイコンが来ていませんこの問題 ?

答えて

0

これはブラウザのデフォルトのCSSの一部です.html2canvasはすべてのものにアクセスできません。また、あるOSでプライバシー情報が漏れる可能性はありません。

クロムがそのshadow selectorsの一部を公開している可能性があるので、この正確なものを調整することもできますが、リストに含まれているかどうかはわかりません。将来の時間、ここではそれが私のFFにどのように見えるかです:

screenshot of OP's result on FF : a gray box

だから、あなたのための最高のは、完全にゼロからドロップダウンを作成することです。このようにして、すべてのUAは同じことを表示し、html2canvasはそれを「スナップショット」することができます。

+0

ありがとうございます... –

関連する問題