php 抓取网页生成图片(微信内生成页面图片也好，你用对了吗？)

　　php 抓取网页生成图片(微信内生成页面图片也好，你用对了吗？)

　　既然打开了这个博客，想必你一定遇到了一个与页面截图数量有关的问题。无论是在浏览器中生成图片，还是在微信中生成页面图片，都需要面临将页面内容转化为图片的问题。问题。

　　1.把整个页面变成图片；

　　2.将页面的部分内容转化为图片。

　　解决方法如下：

　　1.介绍html2canvas

　　为了更方便有效的开发，这里可以引入html2canvas插件。如果读者不想采用这种方案，可以跳过以下内容，自行寻找其他方案。

　　点击查看相关文档：html2canvas 官方文档

　　导入方式：

　　npm install --save html2canvas

　　或者：

　　纱线添加html2canvas

　　2.在组件中引入html2canvas

　　插件安装好后，在需要使用的vue组件中，导入插件如下：

　　从“html2canvas”导入 html2canvas

　　至此，基本环境已经配置完毕，可以接下来使用了。

　　3. 将指定区域转换为图片

　　首先需要让html2canvas获取要转换的节点的内容，所以需要添加一个ref标签。

　　一个例子如下：

　　imageDom 需要是要转换的页面内容的父容器，即要转换的页面内容需要全部收录在 imageDom 节点内。

　　转换方法如下：

　　 /**

* 将页面指定节点内容转为图片

* 1.拿到想要转换为图片的内容节点DOM；

* 2.转换，拿到转换后的canvas

* 3.转换为图片

*/

clickGeneratePicture() {

html2canvas(this.$refs.imageDom).then(canvas => {

// 转成图片，生成图片地址

this.imgUrl = canvas.toDataURL("image/png");

});

}

　　官方示例如下：

　　html2canvas(document.querySelector("#capture")).then(canvas => {

document.body.appendChild(canvas)

});

　　返回的 canvas 参数是一个生成的 canvas 元素。如果要将其转换为图像，可以直接使用 toDataURL 方法。将转换后的图片地址分配给你要展示的图片元素，就可以在页面上看到转换了。发布图片。

　　问题一：微信浏览器无法直接下载生成的图片。

　　在chrome等浏览器中，可以使用以下方法直接下载生成的图片：

　　// 创建隐藏的可下载链接

var eleLink = document.createElement("a");

eleLink.href = imgUrl; // 转换后的图片地址

eleLink.download = "pictureName";

// 触发点击

document.body.appendChild(eleLink);

eleLink.click();

// 然后移除

document.body.removeChild(eleLink);

　　但是，微信浏览器禁用了下载链接。只能使用引导的方式来引导用户将页面内容转化为图片并显示出来。用户可以长按显示的图像保存在本地。

　　如图所示：

　　

　　问题2：页面的某些内容无法在生成的图片中显示

　　之所以能生成图片，是因为页面上指定的内容DOM元素被转换成canvas。转换时，并不是所有的 CSS 属性都支持，例如：box-shadow、text-overflow:ellipsis 等。

　　因此，当图片内容为空白时，建议修改 CSS 呈现样式。

　　生成图像的背景默认为白色。可以通过 backgroundColor 属性修改背景颜色，如下：

　　 html2canvas(this.$refs.imageDom, {

backgroundColor: null // null 表示设置背景为透明色

})

　　生成的画布的宽高，是否允许跨域图片等，读者可以参考官方文档进行相应的设置。

　　欢迎关注博主：小生贤君，有什么问题可以留言~