vue页面内容生成图片并保存本地方案
既然你打开了这篇博客,那么你肯定碰到了和页面截图多少相关的问题,你在浏览器内生成图片也好,微信内生成页面图片也好,都需要面对把页面内容转成图片的问题。1.将整个页面转成图片;2.将页面内部分内容转成图片。解决方案如下:1.引入html2canvas为了更便捷有效的开发,这里可以引入html2canvas这个插件,如果读者不想采用这种方案,可以跳过下面内容,自行寻求其他解决方案。点击可以...
既然你打开了这篇博客,那么你肯定碰到了和页面截图多少相关的问题,你在浏览器内生成图片也好,微信内生成页面图片也好,都需要面对把页面内容转成图片的问题。
1.将整个页面转成图片;
2.将页面内部分内容转成图片。
解决方案如下:
1.引入html2canvas
为了更便捷有效的开发,这里可以引入html2canvas这个插件,如果读者不想采用这种方案,可以跳过下面内容,自行寻求其他解决方案。
点击可以查看相关文档:html2canvas官方文档
引入方式:
npm install --save html2canvas
或者:
yarn add html2canvas
2.将html2canvas引入到组件中
该插件安装完毕后,在你需要使用的vue组件中,按照以下方式,将插件引入:
import html2canvas from "html2canvas"
到此,基本的环境已经配置完毕,接下来就可以使用了。
3.将制定区域内转成图片
首先,你需要让html2canvas获取到你想要转换的节点内容,因此,你需要添加ref标记。
示例如下:
<div class="container" ref="imageDom"></div>
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方法即可,将转换的图片地址赋值给你想显示的图片元素,就可以在页面上看到转换后的图片。
问题1:微信浏览器不能直接下载生成后的图片。
在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 表示设置背景为透明色
})
生成的canvas宽高大小,是否允许跨域图片等,读者可参考官方文档进行相应设置。
欢迎关注博主:小圣贤君,有问题可以留言哦~
更多推荐
所有评论(0)