html2canvas 包含图片生成证书，解决图片跨域问题

最新推荐文章于 2024-12-20 10:55:42 发布

阳羊扬洋

最新推荐文章于 2024-12-20 10:55:42 发布

阅读量1k

点赞数

CC 4.0 BY-SA版权

分类专栏：前端文章标签：前端 vue

本文链接：https://blog.youkuaiyun.com/Danyang_L/article/details/129883687

该文章描述了使用Vue.js框架，结合axios库与后端交互，实现用户证书的展示和生成。当用户点击生成证书按钮，应用从后台获取信息，利用html2canvas将证书内容转化为Base64编码并上传至服务器。同时，处理了图片跨域的问题。

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

结果演示：左图为UI给的证书图片，后台查出来的数据渲染进去后，生成base64编码返回给后端

准备一个生成证书按钮，绑定事件verifyCert

<el-button type="primary" @click="verifyCert">生成证书</el-button>

准备一块区域遍历后端返回的证书集合certList，其中item.pic为集合中每一个对象里的证书

 <div
    class="cert_item"
    v-for="item in certList"
    :key="item.id"
     v-viewer="viewerOptions"
  >
    <img
       class="cert_item_img"
       :src="'http://docentp.xlteacher.cn/' + item.pic"
       alt=""
       style="width: 20%;
       height: 20%;"
    />
</div>

data里面定义变量

data() {
    return {
      certList: [], //证书list
    }
  },

最低0.47元/天解锁文章

200万优质内容无限畅学