页面访问的图片加权限控制

最新推荐文章于 2024-09-14 08:09:14 发布

qq_30437579

最新推荐文章于 2024-09-14 08:09:14 发布

阅读量202

点赞数

文章标签： css html5

本文链接：https://blog.csdn.net/qq_30437579/article/details/132555368

版权

<!DOCTYPE html>
<html lang="en">

<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>
</head>

<body>
    <script>
        function getImgUrl (src) {
            const img = document.createElement('img')
            document.body.append(img)
            const token = 'eyJhbGciOiJIUzI1NiJ9.eyJIZGFqMjAyMTA1MjBjaiI6IkhkYWoyMDIxMDUyMGNqIiwiYXVkIjoiMzA5Iiwic3ViIjoie1widXNlcm5hbWVcIjpcImRldlwiLFwiY29tcGFueUNvZGVcIjpcIjBcIn0iLCJleHAiOjE2OTMzNjQ3NTksImlhdCI6MTY5Mjc1OTk1OX0.z92aydxplm6yUmEiDQvQoT9slx02ZjPSMdXVHVO8fgQ; sidebarStatus=0'
            // const src = './moon.png'
            const request = new XMLHttpRequest()
            request.responseType = 'blob'
            request.open("get", src, true)
            request.setRequestHeader('token', token)
            request.send(null)
            request.onreadystatechange = e => {
                if (request.readyState == XMLHttpRequest.DONE && request.status == 200) {
                    img.src = URL.createObjectURL(request.response)
                    img.onLoad = () => {
                        URL.revokeObjectURL(img.src)
                    }
                    return img.src
                }
            }
        }
        let img = fakeImamge()
        img.src = './moon.png'
        function fakeImamge () {
            const img = new Image()
            return new Proxy(img, {
                set (obj, prop, value, receiver) {
                    if (prop === 'src') {
                        obj[prop] = getImgUrl(value)
                    } else {
                        return Reflect.set(...arguments)
                    }

                }
            })

        }



    </script>
</body>

</html>