使用blob隐藏真实的文件路径

发布于

今天接到要求，要求把网站上的全部图片链接加密，其实方法有很多，我选择了比较简单的一种，html5的blob对象。

直接看代码吧。关于blob的细节大家可自行搜索查询

首先后台返回图片的字节流，代码如下如示：

代码语言：javascript
复制
protected void Page_Load(object sender, EventArgs e)
    {
        string url = Server.MapPath("~/Images/abg.jpg");
        Bitmap b = new Bitmap(url);
        MemoryStream ms = new MemoryStream();
        b.Save(ms, System.Drawing.Imaging.ImageFormat.Jpeg);
        Response.ClearContent();
        Response.ContentType = "image/Jpg";
        Response.BinaryWrite(ms.ToArray());
    }

这里我是写死了一个图片地址，大家可在网址上带上图片地址参数，这样动态获取图片地址来进行返回图片流。

接下来是js代码

代码语言：javascript
复制
    <img id="img1" src="">
    <script type="text/javascript">
        //创建XMLHttpRequest对象
        var xhr = new XMLHttpRequest();
        //配置请求方式、请求地址以及是否同步
        xhr.open('POST', '/Default2.aspx', true);
        //设置请求结果类型为blob
        xhr.responseType = 'blob';
        //请求成功回调函数
        xhr.onload = function(e) {
            if (this.status == 200) {//请求成功
                //获取blob对象
                var blob = this.response;
                //获取blob对象地址，并把值赋给容器
                $("#img1").attr("src", URL.createObjectURL(blob));
            }
        };
        xhr.send();
    </script>

这样就可以了，然后我们回到网页上，看看img标签src的地址是什么

图片的地址就变为这种了，今天就到此为止

#图片标签