js实现页面DOM元素转为图片并且点击按钮图片可下载

js实现页面DOM元素转为图片并且图片可下载

1. 前言：从纯前端的角度实现将页面DOM元素转为图片并且还可以将图片保存到本地
2. 目录：
2.1.将DOM元素转换为图片

2.2.将生成的图片保存在本地 (图片名称可以自定义)


3.实现步骤
本文中实现以 Vue 为基础，但是不论是否使用框架，大体意思都是一样的
3.1 HTML 页面结构

<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>

3.2 css样式结构

// 将生成的图片大小设置为与页面元素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;
  }
}

3.3 js实现部分

// 首先，我们需要下载一个叫做 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>

总结：

1. 使用 html2canvas 来 生成 canvas 元素，然后 利用 canvas 的 toDataURL(‘image/jpeg’) 方法，将 canvas 元素 生成 图片base64格式的 url
2. 如果页面需要显示 生成的图片，那么就动态创建一个 img 元素然后添加到页面上；如果只是为了实现下载，那么就动态创建一个 a 元素(或者直接页面上直接写好 a 元素，然后获取也可以)，将 上面获取到的 url 添加给 a 元素的 href 属性，然后模拟 a 标签点击，即可实现图片下载
3. a 标签的 download 属性，用来设置 a 标签实现下载的文件的名称
   注意：a标签实现的下载必须是同域名内的下载，如果要实现前后端跨域的下载，download 的设置是无效的