javascript jpg格式的十六进制字符串，如何转化为图片显示在页面上

最新推荐文章于 2025-04-17 11:59:48 发布

八分钟de温暖

最新推荐文章于 2025-04-17 11:59:48 发布

阅读量1.1k

点赞数 1

文章标签： javascript 前端开发语言

本文链接：https://blog.youkuaiyun.com/weixin_40466351/article/details/131240687

版权

该文章展示了一段JavaScript代码，它从16进制字符串转换并创建一个图片元素，然后将其添加到HTML页面中。代码首先解析16进制字符串，将其转换为二进制数据，然后基于这些数据生成一个base64编码的PNG图像。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、效果图
在这里插入图片描述
2、主要代码

<html>
<body>
    <div id="imageContainer"></div>
    <script>
        let hexString ="你图片的16进制字符串";
        // 创建一个新的图片元素
        const imgElement = document.createElement("img");
        const imageUrl = imgRun(hexString);
        // 设置图片元素的src属性以展示图片
        imgElement.src = imageUrl;
        // 将图片元素添加到HTML文档中
        const imageContainer = document.getElementById("imageContainer");
        imageContainer.appendChild(imgElement);

        function imgRun(value) {
            let pos = 0;
            let len = value.length;
            if (len % 2 != 0) {
                return null;
            }
            len /= 2;
            const hex = [];
            for (let i = 0; i < len; i++) {
                const s = value.substr(pos, 2);
                const v = parseInt(s, 16);
                hex.push(v);
                pos += 2;
            }
            let binary = '';
            const bytes = new Uint8Array(hex);
            const len2 = bytes.byteLength;
            for (let i = 0; i < len2; i++) {
                binary += String.fromCharCode(bytes[i]);
            }
            return 'data:image/png;base64,' + window.btoa(binary);
        }
    </script>
</body>

</html>