前言

最近，碰到了一个很尴尬的需求，在我使用python苦苦支撑却实现不了的时候，vue就像一道光，哗啦啦的就来了，这个需求就是合成一张图片，然后把这张图片下载下来，而python我又不会使用opencv等库，所以，只能使用PIL强行搞，但是效果并不好。然后，我求助了我的小伙伴，她很轻易的就帮助我搞定了，(太感谢我的小伙伴了。)，但是下载这个图片，成了一个事。所以，今天这篇攻略带来如何生成图片并且下载

html2canvas

这就是我们要使用到的库，我们通过npm或者yarn来进行下载

  1. 安装
npm install --save html2canvas

或者：

yarn add html2canvas
  1. 将html2canvas引入到组件中
import html2canvas from "html2canvas"
  1. 将你想生成的区域转成图片，你需要让html2canvas获取到你想要转换的节点内容，因此，你需要添加ref标记。
<div class="container" ref="imageDom"></div>

imageDom需要是你想转换的页面内容的父容器，即你想转换的页面内容需要全部包含在imageDom节点内。

  1. 转换
clickGeneratePicture(){
      html2canvas(this.$refs.imageDom).then(canvas => {
        // 转成图片，生成图片地址
        this.imgUrl = canvas.toDataURL("image/png");
        console.log(this.imgUrl)
      });
    },

返回的canvas参数就是一个生成好的canvas元素，如果你想将他转成图片，直接使用toDataURL方法即可，将转换的图片地址赋值给你想显示的图片元素，就可以在页面上看到转换后的图片。

  1. 直接触发方法， 将图片下载下来
clickGeneratePicture(){
    html2canvas(this.$refs.imageDom).then(canvas => {
        // 转成图片，生成图片地址
        this.imgUrl = canvas.toDataURL("image/png");
        // 创建隐藏的可下载链接
        var eleLink = document.createElement("a");
        eleLink.href = this.imgUrl; // 转换后的图片地址
        eleLink.download = "pictureName";
        // 触发点击
        document.body.appendChild(eleLink);
        eleLink.click();
        // 然后移除
        document.body.removeChild(eleLink);
    });
},

随便做个点击事件就好了，不过图片如果展示的过大的话，就会只下载显示的部分，还未解决，待补