html页面转换为jpg,html2canvas - 网页转换为图片

1、HTML代码

html2canvas - 网页转换为图片

创建canvas画布

获取文档高宽度

canvas画布放大

设置偏移量

html2canvas插件显示图片及下载

angbike

此处省略多少字

Copyright © W3Schools.com

图片下载

2、CSS代码body{

padding: 0px;

margin: 0px;

}

#content{

width: 100%;

}

#header {

background-color:black;

color:white;

text-align:center;

padding:5px;

}

#nav {

line-height:30px;

background-color:#eeeeee;

height:300px;

width:300px;

float:left;

padding:5px;

}

#section {

width:350px;

float:left;

padding:10px;

}

#footer {

background-color:black;

color:white;

clear:both;

text-align:center;

padding:5px;

}

.down{

display: table;

border: 1px solid #000;

margin: 10px auto;

color: #fff;

background: #000;

text-decoration: none;

padding: 0px 5px 2px 5px;

border-radius: 5px;

}

3、JavaScript代码//创建一个新的canvas

var canvas = document.createElement("canvas");

//获取文档中第一个div元素

var _canvas = document.querySelector('div#content');

//获取文档高宽度

var w = parseInt(window.getComputedStyle(_canvas).width);

var h = parseInt(window.getComputedStyle(_canvas).height);

//将canvas画布放大若干倍，然后放在较小的容器内，就显得不模糊了

canvas.width = w * 2;

canvas.height = h * 2;

canvas.style.width = w + "px";

canvas.style.height = h + "px";

//设置偏移量

var context = canvas.getContext("2d");

context.scale(2,2);

//调用html2canvas

html2canvas(document.querySelector('div'),{canvas: canvas}).then(function(canvas) {

//隐藏原始网页

document.getElementById("content").style.display = "none";

//追加canvas到doc

document.body.appendChild(canvas);

//canvas转换成url，然后利用a标签的download属性，直接下载

document.querySelector(".down").setAttribute('href',canvas.toDataURL());

});

注意：此功能基于html2canvas插件，页面需要引入此插件。

插件下载地址：http://html2canvas.hertzen.com/