html页面截图 html2canvas学习

最新推荐文章于 2024-05-06 11:19:38 发布

宋大王

最新推荐文章于 2024-05-06 11:19:38 发布

阅读量322

点赞数

分类专栏：学习总结文章标签： html截图 html2canvas

本文链接：https://blog.csdn.net/JsongNeu/article/details/89553296

版权

学习总结专栏收录该内容

54 篇文章 0 订阅

订阅专栏

html页面截图 html2canvas学习

html2canvas介绍

html2canvas是一个js插件，可以非常简单的帮我实现html截图
官网
安装

npm install html2canvas

官方给的简单的例子
这个例子适应的html2canvas ^1 的版本

html2canvas(document.body).then(function(canvas) {
    document.body.appendChild(canvas);
});

^0.5.0版本

html2canvas(document.body),
  {
    onrendered: function(canvas) {
      document.body.appendChild(canvas);
    }
  };

demo

html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="Access-Control-Allow-Origin" content="ie=edge" />
    <title>Document</title>
    <link
      rel="stylesheet"
      href="./node_modules/bootstrap/dist/css/bootstrap.min.css"
    />
  </head>
  <body>
    <div id="bg" style="background:url('./bg.jpg') no-repeat;height: 700px;">
      <!-- <img src="./bg.jpg" alt="" /> -->
      <input
        type="text"
        id="text"
        style="
        border: 0;
        background-color: transparent;
        position: absolute;
        margin-top: 345px;
      left: 70px;
      width: 350px; align-self: center;
      text-align: center;
        color: #f46ea1;"
        placeholder="我是宋健 我在东软"
      />
    </div>
    <!-- <a id="down" href="" download="downImg">下载</a> -->
    <button type="button" id="picture" class="btn btn-success">截图</button>
    <script src="./node_modules/html2canvas/dist/html2canvas.min.js"></script>
    <script src="index.js"></script>
  </body>
</html>

document.querySelector('#picture').addEventListener('click', () => {
  html2canvas(document.querySelector('#bg'), {
    // useCORS: true,
    onrendered: canvas => {
      const imageData = canvas.toDataURL();
      // var imageData = canvas
      //   .toDataURL('image/png')
      //   .replace('image/png', 'image/octet-stream');
      //   var imageData = canvas
      //     .toDataURL('image/jpg')
      //     .replace('image/jpg', 'image/octet-stream');
      const a = document.createElement('a');
      a.setAttribute('href', imageData);
      a.setAttribute('download', 'picture.png');
      a.click();
      a.remove();
    }
  });
});

遇到的问题

Uncaught (in promise) DOMException: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported.

因为要截图dom里含有背景图片，所以canvas 图片跨域了，所以出现了这个问题

在网上尝试很多博客中的解决办法
useCORS: true
var imageData = canvas.toDataURL(‘image/png’).replace(‘image/png’, ‘image/octet-stream’);

都没有解决

最后的解决办法，让nginx代理一下就好了

宋大王

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
html页面截图 html2canvas学习

html页面截图 html2canvas学习html2canvas介绍demo遇到的问题html2canvas介绍html2canvas是一个js插件，可以非常简单的帮我实现html截图官网安装npm install html2canvas官方给的简单的例子这个例子适应的html2canvas ^1 的版本html2canvas(document.body).then(fun...
复制链接

扫一扫

专栏目录