JS实现div模块的截图并下载功能
作者:漠北桑海 时间:2024-05-03 11:10:39
当需要实现html页面部分模块截图并具有保存图片功能时,前台直接生成截图并下载会方便的多。多的不说,直接看代码
首先我们需要引入2个js文件:
<script type="text/javascript" src="js/html2canvas.js"></script>
<script type="text/javascript" src="js/jquery-1.12.3.min.js"></script>
加入css 样式,主要是生成"X"关闭图片图标:
body{background: #ccc}
#dw{position: absolute;top: 10px;left:10%;height: 620px;width:1030px;background: #fff; border:1px solid black;padding: 10px}
.close{
position:relative;
left: 10px;
width:0.2em;
height:1em;
background: #333;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
display: inline-block;
}
.close:after{
content: "";
position: absolute;
top: 0;
left: 0;
width:0.2em;
height:1em;
background: #333;
-webkit-transform: rotate(270deg);
-moz-transform: rotate(270deg);
-o-transform: rotate(270deg);
-ms-transform: rotate(270deg);
transform: rotate(270deg);
}
写入随便div 模块,我随便位置给的点击截图按钮
<!-- 要截图的div main 蓝色区域 -->
<div id="main" style="width: 50%; margin-left: 100px;padding: 50px;height: 400px;background: #5a90a0">
<div style="height: 200px;width: 200px;background: #ccc;"></div>
<div style="height: 30px;width: 168px;border:2px solid black;background: red;text-align: center;" onclick="doScreenShot()">截图</div>
</div>
<!-- 生成图片展示的DIV dw-->
<div id="dw" >
<div style="float: right;width: 25px;height: 25px;" title="关闭" onclick="closeok()">
<span class="close"></span>
</div>
</div>
页面效果如下:
js代码如下:
$("#dw").hide();
//关闭图片
function closeok(){
$("#dw").hide();
}
//点击截图
function doScreenShot(){
$("#dw").show();
html2canvas($("#main"), {
onrendered: function(canvas) {
canvas.id = "mycanvas";
var mainwh=$("#main").width();
var mainhg=$("#main").height();
var img = convertCanvasToImage(canvas);
console.log(img);
//document.body.appendChild(img);
$("#dw").append(img) //添加到展示图片div区域
img.onload = function() {
img.onload = null;
canvas = convertImageToCanvas(img, 0, 0, 1024, 600); //设置图片大小和位置
img.src = convertCanvasToImage(canvas).src;
$(img).css({
background:"#fff"
});
//调用下载方法
if(browserIsIe()){ //假如是ie浏览器
DownLoadReportIMG(img.src);
}else{
download(img.src)
}
}
}
});
}
//绘制显示图片
function convertCanvasToImage(canvas) {
var image = new Image();
image.src = canvas.toDataURL("image/png"); //获得图片地址
return image;
}
//生成canvas元素,相当于做了一个装相片的框架
function convertImageToCanvas(image, startX, startY, width, height) {
var canvas = document.createElement("canvas");
canvas.width = width;
canvas.height = height;
canvas.getContext("2d").drawImage(image, startX, startY, width, height, 20, 20, 960, 600); //在这调整图片中内容的显示(大小,放大缩小,位置等)
return canvas;
}
function DownLoadReportIMG(imgPathURL) {
//如果隐藏IFRAME不存在,则添加
if (!document.getElementById("IframeReportImg"))
$('<iframe style="display:none;" id="IframeReportImg" name="IframeReportImg" onload="DoSaveAsIMG();" width="0" height="0" src="about:blank"></iframe>').appendTo("body");
if (document.all.IframeReportImg.src != imgPathURL) {
//加载图片
document.all.IframeReportImg.src = imgPathURL;
}
else {
//图片直接另存为
DoSaveAsIMG();
}
}
function DoSaveAsIMG() {
if (document.all.IframeReportImg.src != "about:blank")
window.frames["IframeReportImg"].document.execCommand("SaveAs");
}
// 另存为图片
function download(src) {
var $a = $("<a></a>").attr("href", src).attr("download", "img.png");
$a[0].click();
}
//判断是否为ie浏览器
function browserIsIe() {
if (!!window.ActiveXObject || "ActiveXObject" in window)
return true;
else
return false;
}
解释说明:这里核心截图代码是
html2canvas(dom, { onrendered: function(canvas) {})
方法,是插件提供的。其中:dom是你要截图的元素模块
它的作用是把这个参数canvas形成一个img图片元素。调用的是单另的convertCanvasToImage()
方法,
其中: image.src = canvas.toDataURL("image/png");
这句就是生成图片的地址。而这个图片就是截取的你的那个元素,有了图片地址就很好办了。我只是把它添加到id=“dw”这个元素中提供展示效果。其实做到这样就够了,但我又用canvas装了一遍。
后面给图片加载方法:onload ()在其中添加属性撒的,自动执行下载方法:区分了ie浏览器(网上找的方法),还有我直接生成的下载方法。关于下载方法很多,你们随意选。
当然自己的这个download(src)下载方法同样适用ie。因为原理很简单,就是用生成个元素自己调用方法。
总结
以上所述是小编给大家介绍的S实现div模块的截图并下载功能网站的支持!
来源:http://www.cnblogs.com/mobeisanghai/p/7682463.html
标签:js,div,截图
0
投稿
猜你喜欢
IDEA最新激活码永久激活教程附激活失败原因汇总
2023-12-13 11:57:29
Google的产品设计指导思想
2008-03-23 14:15:00
Python正则替换字符串函数re.sub用法示例
2021-03-04 17:25:42
纯CSS实现导航下拉菜单
2007-11-25 15:11:00
获取SqlServer存储过程定义的三种方法
2024-01-24 06:03:38
OpenCV实现图像平滑处理的方法汇总
2023-07-12 14:44:33
python 计算数组中每个数字出现多少次--“Bucket”桶的思想
2023-06-28 19:37:55
golang实现整型和字节数组之间的转换操作
2024-02-11 00:13:08
解决python将xml格式文件转换成txt文件的问题(xml.etree方法)
2021-10-21 02:51:13
浅谈Python中的zip()与*zip()函数详解
2021-01-26 13:28:49
用python简单实现mysql数据同步到ElasticSearch的教程
2024-01-15 14:40:39
Go到底能不能实现安全的双检锁(推荐)
2024-04-26 17:36:49
asp如何获知页面上的图象的实际尺寸?
2009-11-24 20:50:00
DRF跨域后端解决之django-cors-headers的使用
2021-10-08 20:12:32
对numpy中的transpose和swapaxes函数详解
2023-03-14 06:10:44
python调用API接口实现登陆短信验证
2021-03-13 00:04:03
mysql 8.0.11安装配置方法图文教程
2024-01-27 17:22:08
python查看微信好友是否删除自己
2021-01-31 23:16:32
详谈python3 numpy-loadtxt的编码问题
2021-08-28 06:42:09
利用Python生成文件md5校验值函数的方法
2023-09-29 14:51:40