php 抓取网页生成图片(用html2canvas根据自己的需求生成截图，绕过服务器图片保存至本地 )

　　php 抓取网页生成图片(用html2canvas根据自己的需求生成截图，绕过服务器图片保存至本地

)

　　今天要分享的就是根据自己的需要使用html2canvas生成截图，并修复html2canvas截图模糊的问题，绕过服务器将图片保存到本地。

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

　　//直接选择你要截图的dom，可以截图，但是因为canvas，生成的图片模糊

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

　　document.body.appendChild(canvas);

　　})

　　常见的解决方法是生成一个多折的画布，放在一个较小的容器中，解决了截图模糊的尴尬。

　　另一个问题是如何绕过服务器并将图像保存在本地。画布有一个 toDataURL 方法，a 标签有一个下载属性。感觉就像一个完美的契合。当然，要在微信中阻止下载，您可以使用微信的 webview 中的内置规则。只要将img嵌套在a标签中（不带href属性），就可以调用保存到手机并分享给朋友的菜单栏。

　　下面是一个简单的demo，html2canvas.min.js下载地址：

　　DOCTYPE html>

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

// }

//});

});

});