java根据h5页面生成图片_Js实现将html页面或div生成图片

今天要分享的是用html2canvas根据自己的需求生成截图，并且修复html2canvas截图模糊，以及绕过服务器图片保存至本地。

只需要短短的几行代码，就能根据所需的dom截图，是不是很方便，但是生成的图片模糊

//直接选择要截图的dom，就能截图，但是因为canvas的原因，生成的图片模糊

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

document.body.appendChild(canvas);

})

常见的解决方案是，生成一个多倍的画布，然后将其放在较小的容器内，这样就解决了截屏模糊的尴尬。

还有一个问题是怎么将图片绕过服务器保存至本地，canvas有个toDataURL的方法，然后a标签有个download属性，感觉简直天造之和。当然微信中屏蔽下载，可以借助微信的webview中的一个内置规则，只要是a标签(不含href属性)里面嵌套Img的，可以正常呼出保存至手机和分享给朋友的菜单栏。

以下是简单的demo, html2canvas.min.js 下载地址: http://www.bootcdn.cn/html2canvas/

htmltopic

*{

margin: 0;

}.test {

width:100px;

height:100px;

text-align:center;

line-height:100px;

background-color: #87CEEB;

display: inline-block;

vertical-align:top;

}

canvas {

margin-right:5px;

}.down {float:left;

margin:40px 10px;

}.down2 {float:left;

margin:40px 30px;

}

测试

下载

下载2

//直接选择要截图的dom，就能截图，但是因为canvas的原因，生成的图片模糊

//html2canvas(document.querySelector('div')).then(function(canvas) {

// document.body.appendChild(canvas);

//});

//创建一个新的canvas

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

let

_canvas= document.querySelector('div');var w = parseInt(window.getComputedStyle(_canvas).width);var h = parseInt(window.getComputedStyle(_canvas).height);//将canvas画布放大若干倍，然后盛放在较小的容器内，就显得不模糊了

canvas2.width = w * 2;

canvas2.height = h * 2;

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

canvas2.style.height = h + "px";//可以按照自己的需求，对context的参数修改,translate指的是偏移量

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

// context.translate(0,0);

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

context.scale(2, 2);

html2canvas(document.querySelector('div'), { canvas: canvas2 }).then(function(canvas) {//document.body.appendChild(canvas);

//canvas转换成url，然后利用a标签的download属性，直接下载，绕过上传服务器再下载

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

});

//这是另一种写法

$(function() {

$(".down2").click(function() {

html2canvas($(".test")).then(function(canvas) {var imgUri = canvas.toDataURL("image/png").replace("image/png", "image/octet-stream"); //获取生成的图片的url

window.location.href = imgUri; //下载图片

});//html2canvas($('.tongxingzheng_bg'), {

// onrendered: function (canvas) {

// var data = canvas.toDataURL("image/png");//生成的格式

// //data就是生成的base64码啦

// alert(data);

// }

//});

});

});