H5 生成海报图

皮卡丘是个程序猿

已于 2023-07-18 16:43:53 修改

阅读量1k

点赞数

文章标签： javascript 前端

于 2023-02-16 15:07:14 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_42530606/article/details/129062428

版权

本文介绍了如何使用H5技术生成海报图，包括安装相关插件、HTML代码编写和方法实现，提供了非原创的代码参考，适合前端开发者根据项目需求进行定制。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

第一步
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 = ''
      // 这些配置详见文章底部
      le

最低0.47元/天解锁文章