Pus*_*ran 1 html javascript css jquery
我想从我的 jsp 页面传递一个 url。它应该解析该页面，获取 html 的特定 div 并将 div 输出转换为图像并将其显示在我的页面上。
示例：我通过 www.google.com 并且我想在图像中转换的 div 输出是
我有一个很好的 jQuery 用于相同的“ http://codepedia.info/convert-html-to-image-in-jquery-div-or-table-to-jpg-png/ ”，但它在本地页面上的工作不是允许传递 URL
任何人都可以帮助解决这个问题。
@Pushkar Sharan 你可以用 html2canvas 做到这一点，只需添加一些脚本，如 jquery-ui.css、jquery.js、jquery-ui.js、https: //cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/ html2canvas.js 然后尝试理解下面的代码
<html>
<head>
<link href="jquery-ui.css" rel="stylesheet">
<script src="jquery.js"></script>
<script src="jquery-ui.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.js"></script>
<script>
$(window).load(function(){
$('#load').click(function(){ //calling this function when Save button pressed
html2canvas($('#cont'), {//give the div id whose image you want in my case this is #cont
onrendered: function (canvas) {
var img = canvas.toDataURL("image/png",1.0);//here set the image extension and now image data is in var img that will send by our ajax call to our api or server site page
$.ajax({
type: 'POST',
url: "http://localhost/my/index.php",//path to send this image data to the server site api or file where we will get this data and convert it into a file by base64
data:{
"img":img
},
success:function(data){
$("#dis").html(data);
}
});
}
});
});
});
</script>
</head>
<body>
<div id="cont">
</div><br>
<center><input type="button" value="Save" id="load"></center><br>
<div id="dis"></div>
</body>
</html>
现在服务器站点程序假设这是 index.php 所以
索引.php
<?php
$img = $_POST['img'];//getting post img data
$img = substr(explode(";",$img)[1], 7);//converting the data
$target=time().'img.png';//making file name
file_put_contents('uploads/'.$target, base64_decode($img));//converting the $img with base64 and putting the image data in uploads/$target file name
//now just check in your upload folder you will get your html div image in that folder
?>