vue页面内容生成图片并保存本地方案

既然你打开了这篇博客，那么你肯定碰到了和页面截图多少相关的问题，你在浏览器内生成图片也好，微信内生成页面图片也好，都需要面对把页面内容转成图片的问题。
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宽高大小，是否允许跨域图片等，读者可参考官方文档进行相应设置。

---

欢迎关注博主：小圣贤君，有问题可以留言哦~