收藏
回答

URL.createObjectURL 图像长按保存时其上浮动的元素也被截取了,为何?

URL.createObjectURL 图像长按保存时其上浮动的元素也被截取了

```

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://unpkg.com/@zumer/snapdom@1.9.14/dist/snapdom.min.js" referrerpolicy="no-referrer"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js" referrerpolicy="no-referrer"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/qrcodejs/1.0.0/qrcode.min.js" referrerpolicy="no-referrer"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        .box {
            margin: 0 auto;
            width: 750px;
            position: relative;
        }

        .poster {
            font-size: 0;
        }

        .posterImg {
            width: 750px;
            height: 1334px;
        }

        .qrBox {
            position: absolute;
            right: 70px;
            top: 1122px;
            width: 120px;
            height: 120px;
        }

        .qrBox img {
            width: 100%;
        }

        .shareImg {
            position: fixed;
            width: 750px;
            height: 1334px;
            font-size: 0;
        }

        .shareImg img {
            width: 375px;
        }

        button {
            position: fixed;
            left: calc(50% - 100px);
            bottom: 50px;
            width: 200px;
            height: 40px;
            display: flex;
            justify-content: center;
            align-items: center;
            border-radius: 10px;
            background-color: #2caff7;
            color: #fff;
            border: none;
            cursor: pointer;
        }

        .preview {
            position: relative;
        }

        .tip {
            position: fixed;
            z-index: 1;
        }
    </style>
</head>
<body>
<div class="box">
    <div class="poster">
        <img src="p1.jpg" class="posterImg"/>
        <div class="qrBox"></div>
    </div>
</div>
<div class="preview">
    <div class="tip">文字</div>
    <div class="shareImg">
        <!-- <img :src="shareData" /> -->
    </div>
</div>

<button id="btn">snap</button>
<script>

    function xx() {
        snapdom.toCanvas(document.querySelector('.poster'), {
            fast:false,
        }).then(blob => {
            // mock vue update
            let data = blob.toDataURL('png')
            let img = `<img src="${data}" />`
            $('.shareImg').html(img)
            $('.box').hide()
        })
    }

    $(function () {
        new QRCode(document.querySelector('.qrBox'), {
            text: "123",
            width: 128,
            height: 128,
        })

        $('#btn').click(function () {
            snapdom.toBlob(document.querySelector('.poster'), {
                fast:false,
                type: 'png'
            }).then(blob => {
                // mock vue update
                let data = URL.createObjectURL(blob)
                let img = `<img src="${data}" />`
                $('.shareImg').html(img)
                $('.box').hide()
            })
        })



    })
</script>
</body>
</html>


```


回答关注问题邀请回答
收藏
登录 后发表内容
问题标签