vue项目把网页生成图片并下载

1、新建vue项目

1、把当前网页生成一张海报需要使用插件html2canvas，先执行一下下载插件语句

    npm install html2canvas ---save

2、在需要生成图片的vue文件引入html2canvas，使用语句

import html2canvas from 'html2canvas';

3、触发生成图片事件 

 html部分
 
 <button @click="toImage">生成图片</button>
 <img :src="images">

js部分
   toImage() {
        // 第一个参数是需要生成截图的元素,第二个是自己需要配置的参数,宽高等
        html2canvas(this.$refs.imageTofile, {
          backgroundColor: null
        }).then((canvas) => {
          let url = canvas.toDataURL('image/png');
          this.images = url;
        })
      }

这样this.images就是img的src指向，可以看到<img />标签显示了整个网页并是一张图片，整体代码如下

<template>
  <div>
    <div v-show="images == ''" >
      <!-- 把需要生成截图的元素放在一个元素容器里,设置一个ref -->
      <div class="image_tofile" ref="imageTofile">
        <img src="../../static/images/bg_1.jpg"/>
        <div class="tip">
          <h1>我只是用来测试的~~~</h1>
        </div>
        　　<!-- 这里放需要截图的元素,自定义组件元素也可以 -->
      </div>
      <button @click="toImage" class="btn">生成图片</button>
    </div>
    <!-- 如果需要展示截取的图片,给一个img标签 -->
    <img :src="images" v-show="images != ''" id="testImg">
  </div>

</template>

<script>
  import html2canvas from 'html2canvas';
  export default {
    name: "save-images",
    data () {
      return {
        images: ''
      }
    },
    methods: {
      // 页面元素转图片
      toImage() {
        // 第一个参数是需要生成截图的元素,第二个是自己需要配置的参数,宽高等
        html2canvas(this.$refs.imageTofile, {
          backgroundColor: null
        }).then((canvas) => {
          let url = canvas.toDataURL('image/png');
          this.images = url;
        })
      }
    }
  }
</script>

<style scoped lang="less">
  .image_tofile {
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    img{
      width: 100%;
      height: 100%;
    }
    .tip{
      position: absolute;
      width: 100vw;
      text-align: center;
      top: 20%;
    }
  }
  .btn {
    position: absolute;
    top: 30%;
  }
#testImg {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}
</style>

转成图片后在移动端直接长按保存就能到本机相册

！！！！！！！！！！！！！

加入在pc端需要直接下载到本地可以如下操作

<template>
  <div>
    <div v-show="images == ''" >
      <!-- 把需要生成截图的元素放在一个元素容器里,设置一个ref -->
      <div class="image_tofile" ref="imageTofile">
        <img src="../../static/images/bg_1.jpg"/>
        <div class="tip">
          <h1>我只是用来测试的~~~</h1>
        </div>
      </div>
      <button @click="toImage" class="btn">生成图片</button>
    </div>
    <img :src="images" v-show="images != ''" id="testImg">
  </div>

</template>

<script>
  import html2canvas from 'html2canvas';
  import Vue from 'vue';
  import { Toast } from 'vant';
  Vue.use(Toast);
  export default {
    name: "save-images",
    data () {
      return {
        images: ''
      }
    },
    methods: {
      // 页面元素转图片
      toImage() {
        // 第一个参数是需要生成截图的元素,第二个是自己需要配置的参数,宽高等
        html2canvas(this.$refs.imageTofile, {
          backgroundColor: null
        }).then((canvas) => {
          let url = canvas.toDataURL('image/png');
          this.images = url;
          this.downloadFile('test.png', url);
          Toast('图片已经生成，请长按保存');
        })
      },
      downloadFile (fileName, content) {
        let aLink = document.createElement('a');
        let blob = this.base64ToBlob(content); //new Blob([content]);

        let evt = document.createEvent("HTMLEvents");
        evt.initEvent("click", true, true);//initEvent 不加后两个参数在FF下会报错  事件类型，是否冒泡，是否阻止浏览器的默认行为
        aLink.download = fileName;
        aLink.href = URL.createObjectURL(blob);
        aLink.dispatchEvent(new MouseEvent('click', {bubbles: true, cancelable: true, view: window}));//兼容火狐
      },
      base64ToBlob(code) {
        let parts = code.split(';base64,');
        let contentType = parts[0].split(':')[1];
        let raw = window.atob(parts[1]);
        let rawLength = raw.length;
        let uInt8Array = new Uint8Array(rawLength);
        for (let i = 0; i < rawLength; ++i) {
          uInt8Array[i] = raw.charCodeAt(i);
        }
        return new Blob([uInt8Array], {type: contentType});
      }
    }
  }
</script>

<style scoped lang="less">
  .image_tofile {
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    img{
      width: 100%;
      height: 100%;
    }
    .tip{
      position: absolute;
      width: 100vw;
      text-align: center;
      top: 20%;
    }
  }
  .btn {
    position: absolute;
    top: 30%;
  }
#testImg {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}
</style>

完成哈哈哈哈哈哈