dom元素转为图片到本地

最新推荐文章于 2024-06-18 19:03:43 发布

z_jing332

最新推荐文章于 2024-06-18 19:03:43 发布

阅读量882

点赞数

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

本文链接：https://blog.csdn.net/z_jing332/article/details/104157096

版权

在远程办公期间，作者制作了一个捐赠页面并尝试将其转化为可保存的图片。通过将DOM元素转换为canvas，再转为base64图片，最终使用a标签的download属性实现了图片下载到本地的功能。

摘要由CSDN通过智能技术生成

1.场景

最近因为肺炎严重，不能到工作场地办公，所以远程在家工作。领导提出做一个捐赠页面，然后生成证书保存图片到本地，虽然最后因为企业没有权利发起社会捐赠被砍掉了，但是我还是决定写个demo练习下。

2.思路

将dom元素转为canvas，然后canvas转base64图片，通过a标签的download实现下载。

3.代码贴上

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js">&