在jQuery中将HTML div转换为图像 [英] Convert HTML div to image in 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 =stylesheet>
< script src =jquery.js>< / script>
< script src =jquery-ui.js>< / script>
< script type =text / javascriptsrc =https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.js>< / script>
< script>
$（window）.load（function（）{
$（'＃load'）。click（function（）{//当Save按钮被按下时调用这个函数
html2canvas（$（ '#cont'），{//给出你想要的图像的div id，在我的情况下这是#cont
onrendered：function（canvas）{
var img = canvas.toDataURL（image / png ，1.0）; //这里设置图像扩展，现在图像数据在var img中，通过我们的ajax调用发送到我们的api或服务器网站页面
$ .ajax（ {
类型：'POST'，
url：http：//localhost/my/index.php，//将图像数据发送到服务器站点API或文件的路径这个数据并通过base64将其转换为文件
data：{
img：img
}，
success：function（data）{
$（ #dis）。html（data）;
}
}）;
}
}）;
}）;
}）;
< / script>
< / head>
< body>
< div id =cont>
< / div>< br>
>< input type =buttonvalue =Saveid =load>< / center>< br>
< div id =dis>< / div>
< / body>
< / html>
现在服务器站点程序假设这是index.php所以
index.php
< ;? php
$ img = $ _POST ['img']; //获取img数据
$ img = substr（explode（;，$ img）[1]，7）; //转换数据
$ target = time（）。'img.png'; //制作文件名
file_put_contents（'uploads /'.$ target，base64_decode（$ img））; //转换$ img与base64并将图像数据放在上传/ $目标文件名
//现在只需检查您的上传文件夹，您将在该文件夹中获得您的html div图像
？>
I want to pass an url from my jsp page. It should parse that page, fetch a specific div of html and convert div output in to a image and display it on my page.
Example: I pass www.google.com and output of div i want to convert in image is
I got a good jQuery for the same "http://codepedia.info/convert-html-to-image-in-jquery-div-or-table-to-jpg-png/" but its working on local page only not allowing to pass a URL
can anyone help in this matter.
@Pushkar Sharan you can do this with html2canvas just add some script like jquery-ui.css, jquery.js, jquery-ui.js, https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.js then try to understand below code
<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>
Now server site program suppose this is index.php so
index.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
?>
这篇关于在jQuery中将HTML div转换为图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
