zoukankan      html  css  js  c++  java
  • 利用blob 加密防下载

    https://blog.csdn.net/qq_37026254/article/details/94396320?utm_medium=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-2.channel_param&depth_1-utm_source=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-2.channel_param

    一些网站的视频为了防止下载,通常会采用blob加密的做法;
    其实这不是特殊的视频传输协议,只是一种 HTML5 Video Blob格式。
    并且大部分网页视频的格式都是 m3u8。

    参考的内容:

    浏览器兼容
    在这里插入图片描述
    下面来简单说明一下怎么理解和操作:

    读取

    这里假设服务器上已经有一份文件,现在要前端加密展示,目录如下:
    在这里插入图片描述
    操作主要分为两部分:

    1.后台读取文件,并转成二进制推送到前台

    file_get_contents : 转为二进制内容
    base64_encode: 对数据进行编码

    <?php 
    	header("Content-type:image/jpeg");
    	echo base64_encode(file_get_contents('images/1.jpeg')); 
    ?>

    2.前端读到二进制内容,转成blob格式,赋值到对应video

    因为后台传输过来的只有后面的二进制内容,不包括标识符,
    所以方法dataURLtoBlob 的参数中拼接了标识符: data:image/png;base64,
    当然这里的拼接内容也可以后台直接返回

    //读取内容
    var fileUpload = function(_link,_type){
        	$.ajax({
    	    	url: 'post.php',
    	    	type:'post',
    	    	success:function(req){
    		        //请求成功时处理
    		        $('img').attr('src',dataURLtoBlob('data:image/jpeg;base64,'+req));
    		    },
    	    })
        }
    //base64 => blob
    function dataURLtoBlob(dataurl) {
    	    var arr = dataurl.split(',');
    	    var mime = arr[0].match(/:(.*?);/);
    	    var bstr = atob(arr[1]);
    	    var n = bstr.length;
    	    var u8arr = new Uint8Array(n);
    	    var mime = mime[1];
    	    while (n--) {
    	        u8arr[n] = bstr.charCodeAt(n);
    	    }
    	    return window.URL.createObjectURL(new Blob([u8arr], { type: mime }));
    	}

    整个html内容:

    <!DOCTYPE html>
    <html>
    <head>
    	<meta charset="utf-8">
    	<title></title>
    	<style type="text/css">
    		img,video{width: }
    	</style>
    </head>
    <body>
    <input type="file" name="main" id="main" value="" accept="image/png, image/jpeg, image/gif, image/jpg" onchange="uploadImg(event)">
    <input type="file" accept="video/*" id="video" name="video" onchange="uploadVideo(event)">
    <video></video>
    </body>
    <script type="text/javascript" src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
    <script type="text/javascript">
        var fileUpload = function(_link,_type){
        	$.ajax({
    	    	url: 'post.php',
    	    	type:'post',
    	    	success:function(req){
    		        //请求成功时处理
    		        $('img').attr('src',dataURLtoBlob('data:image/jpeg;base64,'+req));
    		    },
    	    })
        }
        function dataURLtoBlob(dataurl) {
    	    var arr = dataurl.split(',');
    	    var mime = arr[0].match(/:(.*?);/);
    	    var bstr = atob(arr[1]);
    	    var n = bstr.length;
    	    var u8arr = new Uint8Array(n);
    	    var mime = mime[1];
    	    while (n--) {
    	        u8arr[n] = bstr.charCodeAt(n);
    	    }
    	    return window.URL.createObjectURL(new Blob([u8arr], { type: mime }));
    	}
        fileUpload();
    </script>
    </html>

    在这里插入图片描述

  • 相关阅读:
    [POI2014]KUR-Couriers
    [题解向] Luogu4092 [HEOI2016/TJOI2016]树
    [探究] OI中各种初级数论算法相关
    [SCOI2005]骑士精神
    [intoj#7]最短距离
    数列分块入门
    动态规划问题基础
    Luogu P1967 货车运输
    Luogu P3379 【模板】最近公共祖先(LCA)
    Luogu P3378 【模板】堆
  • 原文地址:https://www.cnblogs.com/chengfengchi/p/13612412.html
Copyright © 2011-2022 走看看