Vue h5生成分享海报，长按保存到手机相册

1. 使用html2canvas生成图片

npm install html2canvas --save

2. 新建海报组件

<template>
  <div>
    <button @click="drawImg">生成海报</button>
    <button @click="saveFile">保存海报</button>
    <div id="capture" class="view">
      <div class="title">这是海报标题</div>
      <div class="content">
        <p>这是海报内容</p>
        <p id="name">====这是需要隐藏的文本====</p>
        <p>这是凑字数的描述文字</p>
        <p>这是凑字数的描述文字</p>
        <p>这是凑字数的描述文字</p>
        <p>这是凑字数的描述文字</p>
        <p>这是凑字数的描述文字</p>
        <p>这是凑字数的描述文字</p>
        <p>这是凑字数的描述文字</p>
        <p>这是凑字数的描述文字</p>
        <p>这是凑字数的描述文字</p>
        <p>这是凑字数的描述文字</p> 
      </div>
    </div>
    // 生成海报展示
    <div id="result" class="result" v-show="showResultImg"></div>
  </div>
</template>

<script>
import html2canvas from 'html2canvas';
export default{
  data(){
    return{
      showResultImg:false
    }
  },
  methods:{
    //生成
    drawImage(){
        this.showResultImg = true
        // this.$toast.loading({
        // 	mask: true,
        // 	message: '海报正在生成中，请稍后...'
        // })
        // let dpi = window.devicePixelRatio || 2
        let options = {
            useCORS:true, // 使用跨域
            ignoreElements:false,
            scale:6, //dpi 设置默认值，提高图片分辨率
        };
        html2canvas(document.querySelector('#capture'),options).then(canvas=>{
            let url = canvas.toDataURL('image/png') // 将canvas转成base64图片格式
            document.querySelector('#result').innerHTML = `<img src="${url}" alt="海报"  width="84%" height="86%"/>`
        })
  },
    // 保存海报
    saveFile(){
        // let dpi = window.devicePixelRatio || 2
        let options = {
            useCORS:true, // 使用跨域
            scale:6,
            ignoreElements:(ele) =>{ //忽略的dom元素，保存海报就不会显示这个元素内容
                if(ele.id === 'name'){
                        return true
                }
            }
        }
      html2canvas(document.querySelector('#capture'),options).then(canvas=>{
        canvas.toBlob(function(blob){
            var a = document.createElement('a')
            var url = window.URL.createObjectURL(blob)
            var filename = '海报.png'
            a.href = url
            a.download = filename
            a.click()
            // 当图片文件加载完成释放这个url
            window.URL.revokeObjectURL(url)
        })
      })
    },
  }
}
</script>
<style>
  .view{
    width: 400px;
    background: pink;
    text-align:center;
  }
  .result{
    width: 100%;
  }
</style>

3. 注意事项

1. 其他组件A调用这个海报组件B，A需要隐藏掉B组件 overflow-y:hidden，如v-if、v-show隐藏B组件，则不会生成海报
2. 点击保存海报，chrome浏览器是直接下载到本地，h5在微信浏览器打开是长按保存图片
3. 如果生成海报的html里面有图片，图片最好使用项目静态图片或者项目服务器图片，用其他域名图片，保存海报其他域名图片不显示