html2canvas 来生成 canvas 元素，然后利用 canvas 的 toDataURL(‘image/jpeg’) 方法，将 canvas 元素生成图片base64格式的 url

最新推荐文章于 2023-09-23 11:59:15 发布

原创最新推荐文章于 2023-09-23 11:59:15 发布 · 1.3k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #css #css3

本文介绍了如何利用html2canvas库将HTML内容转化为canvas元素，并通过canvas的toDataURL方法将canvas转换为图片的base64格式URL，适用于JavaScript、CSS和CSS3的网页开发中。

<template>
  <div>
    <!-- 卡片部分 -->
    <button @click="generateImages">点击生成图片并将图片保存在本地</button>
    <div class="card">
      <div class="card_head">
        <p>姓名：</p>
        <p>张三丰</p>
      </div>
      <div class="card_content">
        <p>age：</p>
        <p>22岁</p>
      </div>
      <div class="card_footer">
        <p>技能：</p>
        <p>打太极</p>
      </div>
    </div>
    <!-- 要生成的图片的内容区域 -->
    <div class="content"></div>
  </div>
</template>

// 将生成的图片大小设置为与页面元素DOM元素大小一致，如果不需要在页面展示图片，则不需要设置
.content {
  img {
    width: 202px;
    height: 102px;
    border-radius: 10px;
  }
}
.card {
  width: 200px;
  height: 100px;
  border: 1px solid skyblue;
  border-radius: 10px;
  background-color: #ccc;
  margin-bottom: 10px;
  div {
    display: flex;
    justify-content: space-between;
    padding: 5px 20px;
  }
}

// 首先，我们需要下载一个叫做 html2canvas 的包，它可以将页面DOM元素转换为 canvas进行绘制
npm i html2canvas
// 然后，在项目中引入 html2canvas
<script>
import html2canvas from 'html2canvas'
methods: {
  // 此处以 card 部分内容为例，假设我们要将 card 整个 div 的内容区域变为图片
  generateImages () {
  	html2canvas(document.querySelector('.card')).then(canvas => {
	  const imgUrl = canvas.toDataURL('image/jpeg')
	  const image = document.createElement('img')
	  image.src = imgUrl
	  // 将生成的图片放到 类名为 content 的元素中
	  document.querySelector('.content').appendChild(image)
	  const a = document.createElement('a')
	  a.href = imgUrl
	  // a.download 后面的内容为自定义图片的名称
	  a.download = 'study_download'
	  a.click()
	 })
  }
}
</script>