blob图片路径加密

目录

        • 一、代码
        • 二、效果演示

一、代码


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

二、效果演示

选择图片前
blob图片路径加密_第1张图片


选择图片后
blob图片路径加密_第2张图片


blob图片路径加密_第3张图片

这么happy的事情,有必要六个截图423:
在这里插入图片描述
blob图片路径加密_第4张图片


标签:jQuery,HTML,blob类文件对象,图片加密


更多演示案例,查看 案例演示


欢迎评论留言!

你可能感兴趣的:(JavaScript,jQuery,other,jquery,html,javascript,blob,图片加密)