[JavaScript知识库]vue之canvas转图片并下载

用到的方法

利用html2canvas插件进截图下载图片
网上看到好多方法，有些没有注册，所以下载不成功，一定要注意啊！

1、下载html2canvas

npm install --save html2canvas

2、在需要的页面引入并注册

import html2canvas from 'html2canvas'
 components: {
    html2canvas
 },

3、实例（方法一）

<template>
<div id="aaa" 
	style="width: 100px;height: 100px;background-color: cadetblue">
</div>
<el-button id="save" @click="download">save</el-button>
<br />
<a href=""  style="display: none" id="tttt"></a>
</template>

<script>
import html2canvas from 'html2canvas'
export default {
  name: "testCanvas",
  methods:{
    // 下载当前组件或页
    download () {
      this.$nextTick(() => {
        // aaa是需要下载的组件或页面
        html2canvas(document.querySelector('#aaa')).then(acanvas => {
          if(window.navigator.msSaveBlob){
            var blob = acanvas.msToBlob()
            /*这里直接改后缀修改格式*/
            window.navigator.msSaveBlob(blob, 'image.jpg')
          } else {
            var url = acanvas.toDataURL()     //把canvas转成base64
            // 写一个隐藏的a标签，借助a标签的download属性下载图片
            document.querySelector('#tttt').href = url
            document.querySelector('#tttt').download = "image.jpg"
            document.querySelector('#tttt').click()
          }
        })
      })
    }

  },
  components: {
    html2canvas
  },
}
</script>

效果

4、实例（方法二）

<template>
  <div id="test">
    <Button  @click="downLoadData">下载</Button>
    <div id="wrap" 
    	 style="width: 400px;height: 300px;background-color: #D3D3D3">
    </div>
  </div>

</template>

<script>
import html2canvas from "html2canvas";

export default {
  name: "test",
  methods:{
    downLoadData(){
      html2canvas(document.getElementById("wrap")).then(function (canvas) {undefined
      /*图片格式：image/jpg、image/png、image/jpeg等*/
      /*但是我就是改不了jpg格式的不知道为啥，求大佬解惑*/
        var image = canvas.toDataURL("image/png");
        let $a = document.createElement('a');
        $a.setAttribute("href", image);
        $a.setAttribute("download", "图片名称"  );
        $a.click();
      });

    }
  },
  components: {
    html2canvas
  },

}
</script>

效果