blob图片路径加密

人间小美味695

已于 2022-11-19 23:25:12 修改

阅读量2.2k

点赞数 3

分类专栏： # JavaScript # jQuery # other 文章标签： jquery html javascript blob 图片加密

于 2021-04-22 09:39:50 首次发布

本文链接：https://blog.csdn.net/cainiaoyihao_/article/details/115969333

版权

JavaScript 同时被 3 个专栏收录

33 篇文章 7 订阅

订阅专栏

other

11 篇文章 1 订阅

订阅专栏

jQuery

10 篇文章 1 订阅

订阅专栏

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>blob图片路径加密</title>
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
    <style>
        .inputCons {
            width: 100px;
            height: 100px;
            border: 1px dashed #333;
            background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAANIAAADICAMAAACqCk+NAAAA/FBMVEUAAAD/biYwMDIwMTMwMDQwMDMwMTMwMTMwMTIvMDIwMTMwMTMwMDMwMDMwMTMwMDMwMTMxMTMzMzMwMTMvMTMwMTIwMTMwMTMvMTP/byUwMTMxMjIwMTMwMTMwMTMwMDMwMTMvMTP/byYwMTL/ciQvMDMvMTP/byYvMTP/byUwMTP/byUvMTI6Ojo0NDT/byYwMTP/byYwMDP/cCb/byUwMTP/byf/byUwMDAqKir/byb/byb/byb/byUwMTL/byX/byb/byb/byf/cCf/byb/cCb/cCQvMTT/byf/bST/byI1NTX/byb/byb/bib/byb/bST/ZhowMTP/byYoHgVfAAAAUnRSTlMAgIC/QKfltCxi7G1WR/SJMxgT4K2clXVdWU8j+tzUxKCOZEsV2M3GvKyEbGYIA/Lp5cmzk3lIOR8M693WzcW/vZyKcFNQQTsuHA8O4qeGeioKchPaXQAABB1JREFUeNrt3Ydy00AQxvHPiiW59xAXsB3H6YU0CKH3Xlfv/y4wYcjYcCKOcqe71ez/DX6jGZXVnYTZGp6/USNttZfG3gNYbLA6JAOFxRYsVQ7IUO0ibNTqkMH8AlKvEJDRSmtIuQEZL2VT6zaZr4IUOwgpjYpIL4/SqYy0agaUUvcQF9OD9KsdpNMdSq9VpFGe0mwZKVSnVPNhvhGlWwjjrdNc7T3oiOLbgulKRi6I9J+OYTiaD+ZJNMR8GSBRG3NlgUQlzJYJEtUwUzZIRPu4LCskauFPmSHR5TyMJcknVQX8jiUJy6SqgYt4knCLVOUBAExJWI0fHHElYSd2cMSWBC9ucMSXhBVSVeZMQlk9OOJMwh6pqnMmoaucVd/iTEKlRorGnEnol0iRz5mEakCKQs4kvFPOd5c4k9AYkqINziQUNkjROmcSHoxIUcCZhOYWKSpxJuE8JEW3OZNw0CFV54xJgE+qmpxJMQOJAWdSzECiwJkUM5B4x5kUM5CocibhHqnqcyahTKq6nEkxD+97nEnokqoVziT0lQMJjzMJ1RopqnMmIV9SDo44k9AISNGYMwkF5UCiw5mEwZAUhZxJaB6TIt9VUgML9GmJFJVdId2huZZvsBS66AgppPna3kJ1SNGaG6RbpC/fDVKfNNZwgrRfI32tOkHCmPR1uO8EqUoaazhB0nqC6LpBGhyStnbcIKFI2uo4QoJHulpyhQQveyRUskdCJcgcCU0vyBoJaJbDrJEA7FcrZe96uU66fnkhCWmRhCQkIQkpJiEJSUhCiklIQhKSkGISkpCEJKSYhARM3+5OzqZZIu1GF73IDulZ9Kf3GSE9iS47Wojku06aRDO9hLIazbbiOmlzlvQQC2wE6jtO+hDN9fbqteNbbiy4ia83T8pd/dm+T66TckpS/H6toODG4rWbk9Af0a8O664sBNVAAgoVL+/OCuQEJNf3qAtJSEL6NyEJSUhCEpKQhCQkIQlJSICQhCQkIQlJSEK6Ru+/PY90dffZ6Rv7pNd3I72d2CZtR9p7bJf0KjJQzyZpehQZ6NFHi6ReZKQ3Fkm5yEinFkknkZFOLJK+RkZ6aZF0PzJSzyLp4+fIQI+nFknYjQw0ydzdwxfYJWGiW5SDbRLOTjf13blu5u7bvxPP4vOSkIQkJCEJSUhCEpKQhAQISUhCcpNUuvIPNOxIxzTXaA1/x47kU4JqT5eL7pI8StiWs6QCJa3tKglPKWkrrpI8SlzVUdL5MPlhcpSELiVt7CoJHUpY6CypFVCyPA1v3V9jJvsn8oqGPerfYabBbUrQeuvmXxJ4DlO1wgSkooZ31Gcw1oEX0DXzNbzQ3YbJmt4d/Rcldb0n0UVHr2C6fH20XqJF2qhXcYN+5LYfPXwxmUKSJEmSJMl+PwGUe7m0+1y+bQAAAABJRU5ErkJggg==');
            background-position: center;
            background-repeat: no-repeat;
            background-size: 100px 100px;
        }
        
        #fileInput {
            width: 100px;
            height: 100px;
            opacity: 0;
        }
        
        .tips {
            color: #f40;
        }
    </style>
</head>

<body>
    <div class="inputCons">
        <input id="fileInput" type="file" name="">
    </div>
    <p>请选择图片文件</p>
    <hr>
    <p class="tips"></p>
    <img id="imgCons" src="" alt="">
    <script>
        $("#fileInput").change(function(e) {
            e.preventDefault();
            let file = this.files[0];
            let temp = window.URL.createObjectURL(file);
            $('.tips').text("可将控制台输出的图片链接粘贴至其他浏览器进行测试。")
            $("#imgCons").attr("src", temp);
            console.log("复制blob图片地址至其他浏览器进行测试：\n\n", temp + "\n\n\n");
            console.log("%c ", 'margin-left:0px;padding:100px 100px;background-image: url("https://liujianwei695.gitee.io/minifile/images/officialAccount.jpg");background-size: 200px 200px;background-position: center;background-repeat: no-repeat;');
        });
    </script>

</body>

</html>