首页 技术 正文
技术 2022年11月23日
0 收藏 915 点赞 3,499 浏览 1817 个字
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="layout" content="main">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
#canvs {
background-color: yellow;
width: 400px;
margin: 100px auto;
text-align: center;
padding: 10px;
}
.title {
font-size: 18px;
}
</style>
<script type="text/javascript" src="http://www.boolaw.com/tpl/default/js/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="js/html2canvas.js"></script>
<script type="text/javascript">
function downloadForJS() {
//使用html2canvas 转换html为canvas
html2canvas(document.getElementById('canvs')).then(function (canvas) {
var imgUri = canvas.toDataURL("image/png").replace("image/png", "image/octet-stream"); // 获取生成的图片的url  
var saveLink = document.createElement('a');
saveLink.href = imgUri;
saveLink.download = 'downLoad.png';
saveLink.click();
});
}
</script>
</head>
<body>
<div id="canvs">
<div class="title">如梦令·昨夜雨疏风骤</div>
<div>[宋] 李清照</div>
<div>昨夜雨疏风骤,浓睡不消残酒,试问卷帘人,却道海棠依旧。</div>
<div>知否,知否,应是绿肥红瘦。</div>
</div>
<div style="width: 400px;margin:50px auto;">
<input class="button" type="button" value="button" onclick="downloadForJS()">测试</input>
</div>
</body>
</html>

html2canvas如何将div转成图片并下载,如何将滚动条的内容截取下来

2.如果存在滚动条,怎么把滚动条里面的内容也截取下来

downloadForJS() {
var targetDom = this.common.getClass('div', 'rightBox')[0]
var copyDom = targetDom.cloneNode(true) // 克隆节点
copyDom.style.width = targetDom.offsetWidth + 'px'
copyDom.style.height = targetDom.scrollHeight + 'PX' // 获得高度
document.getElementsByClassName('wrapperRight')[0].appendChild(copyDom) // 插入节点
html2canvas(copyDom).then((canvas) => {
document.getElementsByClassName('wrapperRight')[0].removeChild(copyDom) // 删除节点
var imgUri = canvas.toDataURL('image/png').replace('image/png', 'image/octet-stream') // 获取生成的图片的url
var saveLink = document.createElement('a')
saveLink.href = imgUri
saveLink.download = 'downLoad.png'
saveLink.click()
})
}

微信扫一扫

支付宝扫一扫

本文网址:https://www.zhankr.net/141580.html

相关推荐
python开发_常用的python模块及安装方法
adodb:我们领导推荐的数据库连接组件bsddb3:BerkeleyDB的连接组件Cheetah-1.0:我比较喜欢这个版本的cheeta…
日期:2022-11-24 点赞:876 阅读:5,464
Educational Codeforces Round 11 C. Hard Process 二分
C. Hard Process题目连接:http://www.codeforces.com/contest/660/problem/CDes…
日期:2022-11-24 点赞:806 阅读:3,688
下载Ubuntn 17.04 内核源代码
zengkefu@server1:/usr/src$ uname -aLinux server1 4.10.0-19-generic #21…
日期:2022-11-24 点赞:565 阅读:4,503
可用Active Desktop Calendar V7.86 注册码序列号
可用Active Desktop Calendar V7.86 注册码序列号Name: www.greendown.cn Code: &nb…
日期:2022-11-24 点赞:731 阅读:4,468
Android调用系统相机、自定义相机、处理大图片
Android调用系统相机和自定义相机实例本博文主要是介绍了android上使用相机进行拍照并显示的两种方式,并且由于涉及到要把拍到的照片显…
日期:2022-11-24 点赞:512 阅读:5,379
Struts的使用
一、Struts2的获取  Struts的官方网站为:http://struts.apache.org/  下载完Struts2的jar包,…
日期:2022-11-24 点赞:671 阅读:3,263
发表评论
暂无评论

还没有评论呢,快来抢沙发~

助力内容变现

将您的收入提升到一个新的水平

点击联系客服

在线时间:8:00-16:00

客服电话

400-888-8888

客服邮箱

ceotheme@ceo.com

扫描二维码

关注微信公众号

扫描二维码

手机访问本站