jq自动生成html,jquery把页面自动生成图片保存.html

htmltopic

* {

margin: 0;

}

html {

background: #fff;

}

.test {

width: 100%;

height: 100%;

text-align: center;

line-height: 100px;

background-color: #fff;

display: inline-block;

vertical-align: top;

}

canvas {

margin-right: 5px;

}

.down {

float: left;

margin: 40px 10px;

}

.down2 {

float: left;

margin: 40px 30px;

}

测试

测试

测试

测试

测试

生成图片

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

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

// document.body.appendChild(canvas);

//});

//创建一个新的canvas

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

let _canvas = document.querySelector('html');

//此处可换body，或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('html'), {

canvas: canvas2

}).then(function(canvas) {

//此处html可换body，或div等

//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);

// }

//});

// });

// });

一键复制

编辑

Web IDE

原始数据

按行查看

历史