<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<title>Test</title>
<style type="text/css">
*{
margin:0 auto;
padding:0;
}
.btn{
width:100px;
height:30px;
line-height:30px;
background:green;
color:#fff;
border-radius:10px;
-webkit-border-radius:10px;
text-align:center;
display:block;
text-decoration:none;
}
.container{
background:#e5e5e5;
}
</style>
<script src="https://cdn.bootcss.com/html2canvas/0.4.1/html2canvas.js"></script>
</head>

<body>
<div style="padding:10px 0">
<div class="btn" id="btn" onclick="copyEle()">截取</div>
<p style="color:red; text-align:center;">截图</p>
<div style="margin-top:10px">
<a href="javascript:;" class="btn" id="download">下载</a>
</div>
</div>
<div class="container" id="container">
<p style="text-align:center">以下是测试内容</p>
<img src='http://5b0988e595225.cdn.sohucs.com/q_70,c_zoom,w_640/images/20171210/998c17cbf43d4e5ea75740282e751c86.jpeg' />
</div>
<script>

function copyEle(){
html2canvas(document.getElementById('container'), {
scale:2,logging:false,useCORS:true,
onrendered: function(canvas) {
//把截取到的图片替换到a标签的路径下载
document.getElementById('download').setAttribute('href',canvas.toDataURL());
//下载下来的图片名字
document.getElementById('download').setAttribute('download','下载.png') ;
document.body.appendChild(canvas);
}
//可以带上宽高截取你所需要的部分内容
// ,
// width: 300,
// height: 300
});
}
</script>
</body>
</html>

hml页面转化成图片的更多相关文章

  1. 把html页面转化成图片——html2canvas

    test.html <div class="fx_zhezhao"></div> <div class="myImg"> & ...

  2. html dom 转化成图片踩坑记（canvas toDataURL）

    需求 在开发过程中遇到这么一个需求,h5页面需要将一个html dom转化成图片,便于用户保存. 面向百度搜索第三方得 html2canvas 和 dom-to-image 两者在写这篇笔记之前在gi ...

  3. 在linux环境下使用icepdf或pdfbox将pdf转化成图片是乱码解决

    在linux环境下使用icepdf或pdfbox将pdf转化成图片是出现乱码,网上查发下是itextpdf生成pdf引用"STSong-Light"字体而linux环境下没有这个字 ...

  4. base64字符串转化成图片

    package com.dhht.wechat.util; import sun.misc.BASE64Decoder;import sun.misc.BASE64Encoder; import ja ...

  5. 将jsp页面转化为图片或pdf升级版（一）（qq:1324981084）

    java高级架构师全套vip教学视频,需要的加我qq1324981084 前面我利用httputil将jsp转化为html,之后转化为pdf,但我发现这样错误率比较高,且成功后有得图片没有完全形成.所 ...

  6. 将jsp页面转化为图片或pdf（一）

    在项目中遇见了将jsp页面转化为pdf的问题,试过itext,但是itext需要标准的html代码,我的页面中的一些属性是itext所不识别的,所以努力了一段时间后就放弃了,后来发现htmlutil抓 ...

  7. 将jsp页面转化为图片或pdf（一）（qq:1324981084）

    java高级架构师全套vip教学视频,需要的加我qq1324981084 在项目中遇见了将jsp页面转化为pdf的问题,试过itext,但是itext需要标准的html代码,我的页面中的一些属性是it ...

  8. 用JavaScript将Canvas内容转化成图片的方法

    上周我们花了半天时间开发下一个准备放进Mozilla Marketplace的应用.有一个应用现在非常的火热,那就是Instagram,Facebook花了100万美元收购了它.我们也想有100万美元 ...

  9. H5页面转成图片并下载到本地

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...

随机推荐

  1. Python之jieba库的使用

    jieba库,它是Python中一个重要的第三方中文分词函数库. 1.jieba的下载 由于jieba是一个第三方函数库,所以需要另外下载.电脑搜索“cmd”打开“命令提示符”,然后输入“pip in ...

  2. application————web

    application 作用域: 只要web服务器不关闭就一直存在 统计页面的统计次数 一个用户 多次刷新也统计 多个用户访问 思路: 需要一个变量 count 记录index.jsp访问次数 方法 ...

  3. JavaMap的一些常用方法

    package exam; import java.util.Collection; import java.util.HashMap; import java.util.Map; import ja ...

  4. digital envelope routines:EVP_DecryptFinal_ex:wrong final block length问题原因分析

    最近在做一个项目时,使用openssl中的aes进行加密和解密,使用相同的密钥但是出现下面的错误日志: 139868329146176:error:0606506D:digital envelope ...

  5. JAVA结对编程--阶段总结

    一.需求分析 1.基本需求 随机生成n道题目 支持整数.分数,支持多运算符 能判断正误,错误时给出正确答案 能计算出正确率 2.扩展需求 处理生成题目并输出到文件 完成题目后从文件读入并判题 支持多语 ...

  6. day05 模块学习

    目录 1.模块简介 2.collections模块常见方法 3.random模块 4.time模块 5.pickle模块 6.json模块 7.os模块 8.sys模块 9.正则表达式 10.re模块 ...

  7. 在VS2013、VS2015下如何配置DirectX SDK的开发环境

    在Visual Studio 2013下配置DirectX SDK可以进行基于DirectX的3D大型应用程序的开发.如果在开发DirectX程序时不配置其开发环境会引起编译器报错, 下面就与大家分享 ...

  8. IDEA 控制台乱码问题

    一.修改IDEA的配置文件 找到IDEA安装目录下的 /bin/idea.exe.vmoptions(32位) 或 idea64.exe.vmoptions(64位),添加如下一行: -Dfile.e ...

  9. 安装Visual Studio 语言包时出现windows 程序兼容模式已打开.请将其关闭

    打开 cmd.exe 输入 安装包路径 /Uninstall例如:D:\vs_lang_cn.exe /Uninstall (中间有个空格,Uninstall前是个左斜杠)回车 后 安装包会运行.点击 ...

  10. v4l2框架

    参考:https://www.cnblogs.com/tuotuteng/p/4648387.html http://blog.sina.com.cn/s/blog_c91863e60102w65w. ...