前端-如何将网页保存为图片

问题重现

前台生成一张复杂的海报，海报中包含外链图片资源

问题难点

网页由多个内容组成，前端不好将整个网页保存为图片。当然，可以使用canvas进行绘图（canvas语法参考）网页中存在外链图片资源

解决方案

概述（笔者以Vue为例）

主要使用html2canvas，将页面转成canvas，从而转成图片。但使用html2canvas无法对外链图片资源进行良好的处理，当然网上有很多跨域的解决方案，但是，很不好意思的是，网上处理的跨域方案，都不太适用。所以，我采用了image-to-base64，将图片转成base64格式，然后使用html2canvas，保存图片。

综上所述，本文主要处理的问题是，将含有外链图片资源的网页保存为图片.

安装依赖包（使用npm）

npm install --save html2canvas安装image-to-base64image-to-base64介绍

npm i -S image-to-base64

图片转base64

import imageToBase64 from 'image-to-base64';// this.postImage = url;imageToBase64(this.postImage).then((baseUrl) => {this.postImage = `data:image/jpg;base64,${baseUrl}`;}).catch((error) => {console.log(error);});

下载图片

<div ref='post'>海报内容</div><a ref='down' style="display:none"></a>

js片段演示

drawPostImage() {html2canvas(this.$refs.post).then((canvas) => {const oImg = new Image();oImg.src = canvas.toDataURL(); // 导出图片this.$refs.down.href = canvas.toDataURL();this.$refs.down.download = '下载图片名称';this.$refs.down.click();});},

如果觉得《前端-如何将网页保存为图片》对你有帮助，请点赞、收藏，并留下你的观点哦！