H5 生成海报图

大家好，欢迎来到IT知识分享网。

●●●非原创、代码只提供参考●●●

第一步
1、安装插件

npm i qrcodejs2 --save

npm i html2canvas --save

第二部
直接复制代码粘贴，运行起来

<template>
  <div>
    <!-- 海报设计, 请根据需求进行修改即可 -->
    <!-- 不要去掉v-show, 就是为了渲染且不显示(开发调试CSS样式时打开,否则看不到) -->
    <!-- 您可以向里面加入任何元素及data上的数据, 实现DIY -->
    <!-- 到时候这整个DOM元素会生成图片(所见所得), 供用户保存下载 -->
    <div
    id="posterHtml"
    :style="{backgroundImage: 'url('+posterHtmlBg+')'}"
    v-show="false">
      <!-- 文案 -->
      <div class="text-content">
        <h1>{
  
  { posterContent }}</h1>
      </div>
      <!-- END -->
      <!-- 二维码 -->
      <div class="qrcode">
        <div class="text-wechat">
          <span>二维码扫码结果也是自定义的</span>
        </div>
        <div id="qrcodeImg" />
      </div>
      <!-- END -->
    </div>

    <input v-model="posterContent">
    <button @click="getImage()">生成海报</button>

    <!-- 最终海报图片显示出来 -->
    <img v-if="posterImg" :src="posterImg" class="result-image">
    <!-- END -->

  </div>
</template>

<script>
import QRCode from 'qrcodejs2'
import html2canvas from 'html2canvas'
export default {
  data() {
    return {
      // 文案内容
      posterContent: '所见即所得', 
      // 海报背景图
      posterHtmlBg: 'https://img-blog.csdnimg.cn/ad0937be901f44ac9c75b07709d4abaf.jpeg',
      // 最终生成的海报图片(base64)
      posterImg: '', 
    }
  },

  methods: {

    /**
     * 获取海报图片(base64)
     * @description 根据您的需求,处理base64图片
     * @return void
     */
    getImage() {
      // 例如,二维码扫描后打开百度网页
      this.createQrcode('http://www.baidu.com')
      // 绘制海报图片
      this.createPoster()
    },

    /**
     * 创建二维码
     * @description new QRcode({})
     * @param {String} - 二维码跳转的链接或文字
     * @return void
     */
    createQrcode(text) {
      // 获取DOM元素,这块也可以用ref获取
      const qrcodeImgEl = document.getElementById('qrcodeImg')
      qrcodeImgEl.innerHTML = ''
      // 这些配置详见文章底部
      let qrcode = new QRCode(qrcodeImgEl, {
        width: 100,
        height: 100,
        colorDark: '#000000',
        colorLight: '#ffffff',
        correctLevel: QRCode.CorrectLevel.H
      })
      qrcode.makeCode(text)
    },

    /**
     * 创建生成海报
     * @description 将DOM元素生成为base64
     * @return void
     */
    createPoster() {
      // 生成海报
      const vm = this
      // 获取根元素
      const domObj = document.getElementById('posterHtml')
      // html2canvas 官网: http://html2canvas.hertzen.com/
      // 配置文档: http://html2canvas.hertzen.com/configuration
      html2canvas(domObj, {
        useCORS: true,
        allowTaint: false,
        logging: false,
        letterRendering: true,
        onclone(doc) {
          let e = doc.querySelector('#posterHtml')
          e.style.display = 'block'
        }
      }).then(function(canvas) {
        // 在微信里,可长按保存或转发
        // 这里可以更改图片格式,默认是png
        vm.posterImg = canvas.toDataURL('image/png')
        // 最终生成的海报图片(base64)
        // console.log(vm.posterImg)
      })
    }

  }
}
</script>

<style scoped>
/* 样式根据您的需求修改即可 */
#posterHtml {
  width: 100%;
  height: 500px;
  background-size: 100% 100%;
  position: relative;
}
.text-content {
  color: #fff;
  background: red;
  text-align: center;
  padding: 20px;
}

/* 二维码 */
.qrcode {
  display: flex;
  justify-content: space-around;
  position: absolute;
  bottom: 0px;
  width: 100%;
}
.text-wechat {
  color: #fff;
}
#qrcodeImg {
  padding: 10px;
  background: #fff;
  border-radius: 10px;
}
/* END */


/* 最终海报 */
.result-image {
  width: 100%;
  height: 500px;
}
/* END */
</style>

第三部
根据项目需求，随意处置

屏幕截图

1、html部分代码

 <!-- 屏幕截图直接截 -->
    <div v-show="false">
      <img id="posterImg" :src="posterImg" class="">
    </div>

2、方法部分代码

（1）、posterHtml为需要截屏部分设置的id

 // 屏幕截图
    screenshot() { 
   
      const domObj = document.getElementById('posterHtml');
      html2canvas(domObj, { 
   
        useCORS: true, // 支持图片跨域
        scale: 2, // 设置放大的倍数
        height: document.getElementById('posterHtml').scrollHeight,
        windowHeight: document.getElementById('posterHtml').scrollHeight,
        onclone(doc) { 
   
          const e = doc.querySelector('#posterHtml');
          e.style.display = 'block';
        }
      }).then((canvas) => { 
   
        this.posterImg = canvas.toDataURL('image/png');
        this.$nextTick(() => { 
   
          this.saveImage();
        });
      });
    },

    // 保存图片
    saveImage() { 
   
      var imgName = '客需清单';
      var img = document.getElementById('posterImg');
      var link = document.createElement('a');
      link.href = img.src;
      link.download = imgName + '.png';
      document.body.appendChild(link);
      link.click();
      document.body.removeChild(link);
    }