php 抓取网页生成图片(Today,图片,要能下载的图片!把html页面变成图片)

　　php 抓取网页生成图片(Today,图片,要能下载的图片!把html页面变成图片)

　　今天，客户又提出了一个需求：“我要这个页面的图片，还有可以下载的图片！”

　　把一个html页面转成图片应该不会太难，所以只能去百度查一下我需要的答案。百度上很多前辈给了一个html2canvas的东西。

　　下面是对它的介绍：

　　html2canvas通过获取页​​面DOM和元素的样式信息，渲染成canvas图片，实现页面截图功能。

　　其实它的用法很简单。有的博客直接给出了详细的步骤，我只是复制过来，变成了我的东西。我把它写在这里，以防以后被使用。

　　一、导入html2canvas.min.js

　　可以去html2canvas官网查看

　　

　　可以看到上面给出了两个js，可以下载，但是，我下载了这两个文件后，发现不能使用。为什么？js里面好像有很多中文，但是格式不对。，只能自己找地方下载，于是就到了这个网站下载js但是别搞错了，几个下载按钮都是下载的.exe文件，

　　下载的文件是一个压缩文件，我们可以到压缩文件的dist目录下找到这个js并导入到我们的项目中，然后

　　二、编写js方法

　　这是我的页面

　　

　　这是我的代码

　　

　　点击Generate Image后，html页面会生成如图所示的图片：

　　

　　三，你觉得这已经结束了吗？等等~~

　　这个图片其实是生成到html底部的

　　我想要的效果是跳转到这个页面的时候直接看到一张图片，

　　我的想法是这样的：下面的js方法不需要点击事件，跳转到这个页面的时候直接生成图片，隐藏html页面。哦，漂亮！

　　所以我的代码变成了这样

　　

　　我的页面变成了这样

　　

　　你看，这直接变成了图片，我的html页面也被隐藏了。

　　ok，把测试代码复制到自己的项目中就行了，不说了，我有点迷茫~~~~~~

　　对了，这个也支持动态html页面，比如页面有后台的值，这些都无关紧要！

　　更新 - - - - - - - - - - - - - - - - - -

　　我以为我已经很好地完成了这个功能。两天后，收到客户的反馈：“这张图像素太低了，什么都看不清楚，还不如html页面！”

　　我还能做什么，不断改变，

　　后来在网上发现很多使用html2cnavas的人都有这个问题。好像画布的宽高需要加倍再缩小。具体原因我记不得了。

　　所以我替换了我的代码如下：

　　$(document).ready(function(){

var w = $(".m-box").width();

var h = $(".m-box").height();//要将 canvas 的宽高设置成容器宽高的 2 倍

var canvas = document.createElement("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(document.body, {canvas: canvas,

onrendered: function(canvas) {

var dataUrl = canvas.toDataURL();

var newImg = document.createElement("img");

newImg.src = dataUrl;

document.body.appendChild(newImg);

$("img").css({

"width": canvas.width / 2 + "px",

"height": canvas.height / 2 + "px",

})

}

});

$(".m-box").attr("style","display:none");

})

　　前面的代码可以丢弃，(".m-box")是我最大的div，

　　ok，画面真的变得很清晰了，

　　好的，就是这样

　　～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～ ~~~~ ~~~~~~~~~~~~~

　　甚至

　　好吧，我知道它不会那么容易结束，客户端会下载这张图片

　　怎么做呢，因为这个图片是canvas生成的，如果我本地有这个图片，很容易下载，这个html页面只有一个img标签

　　所以参考了文章底部的博客，不用经过后端，直接在html页面下载

　　function save(){

// 图片导出为 png 格式

var type = 'png';

var imgData = document.getElementsByTagName("img")[0].src;

var _fixType = function(type) {

type = type.toLowerCase().replace(/jpg/i, 'jpeg');

var r = type.match(/png|jpeg|bmp|gif/)[0];

return 'image/' + r;

};

// 加工image data，替换mime type

imgData = imgData.replace(_fixType(type),'image/octet-stream');

/**

* 在本地进行文件保存

* @param {String} data 要保存到本地的图片数据

* @param {String} filename 文件名

*/

var saveFile = function(data, filename){

var save_link = document.createElementNS('http://www.w3.org/1999/xhtml', 'a');

save_link.href = data;

save_link.download = filename;

var event = document.createEvent('MouseEvents');

event.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);

save_link.dispatchEvent(event);

};

// 下载后的问题名

var filename = 'card_' + (new Date()).getTime() + '.' + type;

// download

saveFile(imgData,filename);

}

　　只需要一个点击事件，因为我需要用户进入这个页面才能看到图片和下载按钮，所以先隐藏下载按钮，然后再显示。

　　canvas画布请参考wc3school

　　参考：--------

　　参考：--------