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