<!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. 学习笔记TF055:TensorFlow神经网络简单实现一元二次函数

    TensorFlow运行方式.加载数据.定义超参数,构建网络,训练模型,评估模型.预测. 构造一个满足一元二次函数y=ax^2+b原始数据,构建最简单神经网络,包含输入层.隐藏层.输出层.Tensor ...

  2. Python基础：六、变量和常量

    一.变量 1. 变量: 将运算的中间结果暂存到内存,以便后续程序调用 2. 变量的作用: 代指内存里某个地址中保存的内容 3. 变量的命名规则: 1. 变量由字母.数字.下划线搭配组合而成 2. 不可 ...

  3. java基本数据类型和运算符

    一.基本数据类型 种类: 内置数据类型 引用数据类型 1.内置数据类型 一共有八种基本类型,六个数字类型(四个整数类型,两个浮点型),一个布尔型,一个字符类型. (1)byte: byte数据类型是8 ...

  4. postman测试请求参数中文乱码问题

    用IDEA调试代码时,用postman测试请求url,发现post或者get请求中参数是中文的话,后台获取的参数是乱码, 一般两个方面 发送请求的一方:postman的问题 接受请求的一方:tomca ...

  5. eclipse与visualVM与mat

    GC与CPU与内存的查看与分析 本文主要讲visualVM,MAT的下载配置;以及如何运用visualVM生成hprof文件;如何用visualVM分析CPU消耗,程序瓶颈在哪里;怎么用MAT导入hp ...

  6. day-13装饰器

    函数的嵌套定义 概念:在一个函数的内部定义另一个函数 为什么要有函数的嵌套定义:1)函数fn2想直接使用fn1函数的局部变量,可以将fn2直接定义到fn1的内部,这样fn2就可以直接访问fn1的变量2 ...

  7. Yii2 设计模式——设计模式简介

    我们首先来思考一个问题:作为工程师,我们的价值是什么? 笔者认为是——解决用户问题. 我们的任何知识和技能,如果不能解决特定的问题,那么就是无用的屠龙之术:我们的任何经验,如果不能对解决新的问题有用, ...

  8. servlet_3

    ServletContext 介绍 提供的功能 servlet中获取servletcontext实例 servletcontext接口的方法 package com.fgy; import java. ...

  9. HBASE SHELL 命令使用

    HBASE SHELL命令的使用 在hbase shell客户端有许多的操作命令,今天回顾并且总结一二,希望和广大读者共同进步,并且悉心聆听你们的意见.在此的hbase版本是:HBase 1.2.0- ...

  10. oracle 的 exp 和imp命令

    数据导出: 1 将数据库TEST完全导出,用户名gdoa 密码123 导出到D:\TEST_BK.dmp中 exp gdoa/123@TEST file=d:\TEST_BK.dmp full=y   ...