js实现dom生成图片可以根据隐藏元素生成图片

最新推荐文章于 2024-05-31 18:11:37 发布

stpzhf

最新推荐文章于 2024-05-31 18:11:37 发布

阅读量383

点赞数 4

文章标签： javascript 前端 css

本文链接：https://blog.csdn.net/stpzhf/article/details/136351266

版权

<html>
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/dom-to-image/2.6.0/dom-to-image.min.js"></script>
    <style >
      .box{
        width: 800px;
        height: 800px;
        background-color: red;
      }
    </style>
  </head>
  
  <body>
    <div style="position: relative;width: 600px;height: 600px;overflow: hidden;">
        <div class="box" id="box">
            <div style="display: flex;justify-content: space-between;">
                <span>1</span>
                <span>2</span>
            </div>
        </div>
        <div class="msk" style="position: absolute;width: 600px;height: 600px;left:0; top: 0;right: 0; bottom: 0; background-color:#fff;"></div>
    </div>
    <button class="btn">Download</button>
    <canvas id="myCanvas"></canvas>
    <!-- <script src="./index.js"></script> -->
    <script>
        const hiddenElement = document.querySelector("#box");
        const btn = document.querySelector(".btn");
        btn.addEventListener("click", async () => {
        const res = await domtoimage.toPng(box);
        downloadImage(res);
        });
        const downloadImage = (imgsrc, name) => {
        let image = new Image();
        // 解决跨域 Canvas 污染问题
        image.setAttribute("crossOrigin", "anonymous");
        image.src = imgsrc;
        image.onload = function () {
            let canvas = document.createElement("canvas");
            const { width, height } = image;
            canvas.width = width;
            canvas.height = height;
            let context = canvas.getContext("2d");
            context.drawImage(image, 0, 0, width, height);
            let url = canvas.toDataURL("image/png");
            const img = document.createElement('img')
            img.src = url
            document.body.appendChild(img)
            let a = document.createElement("a");
            let event = new MouseEvent("click");
            a.download = name || "photo";
            a.href = url;
            a.dispatchEvent(event);
        };
        };
    </script>
  </body>
  </html>