dom元素转为图片到本地

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"></script>
  <script src="https://cdn.bootcss.com/html2canvas/0.5.0-beta4/html2canvas.js"></script>
  <title>图片下载</title>
</head>
<body>
  <div>
    <img src="./goods.jpg" alt="图片1">
  </div>
  <a class="down" href="" download="imgTest">图片下载</a>
</body>
</html>
<script>
//创建canvas元素 
let canvas_dom = document.createElement('canvas');
// 获取图片dom
let img = document.querySelector('div');
let w = parseInt(window.getComputedStyle(img).width);
let h = parseInt(window.getComputedStyle(img).height);

// 设置画布宽高
canvas_dom.width = w;
canvas_dom.height = h;
canvas_dom.style.width = w + 'px';
canvas_dom.style.height = h + 'px';

var context = canvas_dom.getContext('2d');
context.scale(2,2);
html2canvas(document.querySelector('div'), { canvas: canvas_dom }).then(function(canvas) {
  //利用a标签的download属性，直接下载
  document.querySelector(".down").setAttribute('href', canvas.toDataURL());
});
</script>

4.效果展示

在这里插入图片描述

来源：CSDN

作者：z_jing332

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

标签

dom

html2canvas

canvas

canvas元素