股利的img目錄HTML2Canvas

-1

我想轉換一個div使用html2canvas的img目錄，這個問題該加工之後的最終圖像不理我圖像div和只顯示文本： https://gist.github.com/martinop/cc20969f49b2bb116617 https://gist.github.com/martinop/5fd0199d800ee2ffe313 股利的img目錄HTML2Canvas

如果我使用其他方式像background-img在CSS與我的testid，當我點擊按鈕時，我有這個錯誤：未捕獲SecurityError：未能執行'toDataURL'對'HTMLCanvasElement'：受污染的畫布可能不會導出

來源

2015-07-11 Martin Ocando

不看它聽起來像你犧牲品同源策略的代碼。 Afaik無法以這種方式在畫布中包含來自其他域的圖像。 – Sirko

我能做什麼？ :( –

你需要給圖像的完整路徑，以創建使用htm2canvas的div的圖像

FOR I.E.

<img src="https://avatars0.githubusercontent.com/u/10482079?s=140" class="img">

我已經爲我測試了這個和它的工作。它在Chrome工作太...運行的代碼片段中鉻

$(window).load(function(){ 
 
    $('#load').click(function(){ 
 
      html2canvas($('#testdiv'), { 
 
       onrendered: function (canvas) { 
 
        var img = canvas.toDataURL("image/png") 
 
        window.open(img); 
 
       } 
 
      }); 
 

 

 
    }); 
 
});

div#testdiv 
 
{ 
 
    height:500px; 
 
    width:500px; 
 
    position: relative; 
 
} 
 
    
 
.fuente{ 
 
\t font-family: 'Chewy', cursive; 
 
\t margin-left: 50px; 
 
\t margin-bottom: 50px; 
 
} 
 
h1{ 
 
\t color: #EE1F3B; 
 
    text-shadow: 1px 1px 2px black; 
 
    font-size: 70px; 
 
    
 
} 
 
.img{ 
 
\t width: 100px; 
 
\t height: 100px; 
 
} 
 
.imgequipo{ 
 
    position: absolute; 
 
    top: 90px; 
 
    left: 335px; 
 
    width: 100px; 
 
\t height: 100px; 
 
    
 
} 
 
h2{ 
 
    position: absolute; 
 
    top: 110px; 
 
    font-family: 'Oswald', sans-serif; 
 
    color: #ffe400; 
 
    font-size:80px; 
 
    font-weight: bold; 
 
    left: 30px; 
 
    
 
} 
 
    
 
body{ 
 
\t margin-top: 100px; 
 
\t margin-bottom: 100px; 
 
\t background-color: #eeeeee; 
 
}

<html> 
 
<head> 
 
<script src="http://html2canvas.hertzen.com/build/html2canvas.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"> 
 
<link href='http://fonts.googleapis.com/css?family=Chewy' rel='stylesheet' type='text/css'> 
 
<link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'> 
 
<link rel="stylesheet" type="text/css" href="style.css"> 
 
</head> 
 
<body> 
 
<div class ="container"> 
 
<h1 class="fuente text-center">prueba</h1> 
 
<div class="col-md-1 col-md-offset-3"> 
 
<div id="testdiv"> 
 
<img src="https://avatars0.githubusercontent.com/u/10482079?s=140" class="img"> 
 
<img src="https://avatars0.githubusercontent.com/u/10482079?s=140" class="imgequipo"> 
 
<h2>prueba2</h2> 
 
</div><br> 
 
<button id="load" class="btn btn-info">Generar Imagen</button> 
 
</div> 
 
</div> 
 
    
 

 
</body> 
 
</html>

來源

2015-07-11 21:52:24

我嘗試，並且不爲我在Chrome中工作：（（ –

它的工作在這裏http://codepen.io/anon/pen/WvJLBJ太所以我認爲你的chrome版本可能是舊版本，請升級chrome並檢查它。 –

我有v 43.0.2357.132米 –

股利的img目錄HTML2Canvas

回答

相關問題