首页 文章

分为img HTML2Canvas

提问于
浏览 次
-1

我正在尝试使用html2canvas将div转换为img，此过程后的问题最终图像忽略了div中的图像并且只显示文本：https://gist.github.com/martinop/cc20969f49b2bb116617 https://gist.github.com/martinop/5fd0199d800ee2ffe313

如果我在我的testid中使用css中的background-img等其他方式，当我点击按钮时我有这个错误：Uncaught SecurityError：无法在'HTMLCanvasElement'上执行'toDataURL'：污染的画布可能无法导出

javascript jquery html css

1 回答

  • 0

    你需要提供完整的图像路径，以便使用htm2canvas创建div的图像

    对于I.E.

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

    我已经测试了这个及其对我的工作 . 它也适用于chrome ...在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{
	font-family: 'Chewy', cursive;
	margin-left: 50px;
	margin-bottom: 50px;
}
h1{
	color: #EE1F3B;
    text-shadow: 1px 1px 2px black;
    font-size: 70px;
 
}
.img{
	width: 100px;
	height: 100px;
}
.imgequipo{
   position: absolute; 
   top: 90px; 
   left: 335px; 
  width: 100px;
	height: 100px;
 
}
h2{
   position: absolute; 
   top: 110px; 
   font-family: 'Oswald', sans-serif;
   color: #ffe400;
   font-size:80px;
   font-weight: bold;
   left: 30px;   
 
}
 
body{
	margin-top: 100px;
	margin-bottom: 100px;
	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>
    回复于

相关问题