图片、音频获取二进制流或url的blob值

1、HTML部分

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--<input id="input" onchange="change()" type="file"></input>-->
<img id="img" src="img/1.png" width="50px" height="50px" />
<output id="result"></output>
</body>
</html>

2、JS部分

 
<script>
var img = document.getElementById("img");
var result1 = document.getElementById("result");
window.onload = function() {
load();
}
function load(){
　　loadImageToBlob(img.src, function(blobFile) {//这里的img.src改地址
　　　　if(!blobFile) return false;

　　　　　　//生成二进制流  　　　　

　　　　　var fileReader = new FileReader();
 　　　　 fileReader.readAsDataURL(blobFile);
  　　　　fileReader.onload = function() {
　　　　　　　　console.log(this.result);//这里输出的数据放到url里能生成图片，或者post回后台生成mp3，二进制流
 　　　　 };

　　　　　　//生成url可以用于页面显示

　　　　result1.innerHTML = '<a download href="' + window.URL.createObjectURL(blobFile) + '" target="_blank">文件下载</a>';
　　});
}
var loadImageToBlob = function(url, callback) {
if(!url || !callback) return false;
var xhr = new XMLHttpRequest();
xhr.open('get', url, true);
xhr.responseType = 'blob';
xhr.onload = function() {
// 注意这里的this.response 是一个blob对象 就是文件对象
callback(this.status == 200 ? this.response : false);
}
xhr.send();
return true;
}
</script>

3、PHP后台操作

// （this.result） 前端传回来的
    $data = $_POST['data'];
    $data = $this->base64_to_blob($data);    
    if(is_array($data)){
        $data = reset($data);
    }
    
    $filename = time().'.mp3'; //后缀是mp3格式的文件名
    
    $path = 路径.'/'.(date('Y/m/d',TIME)).$filename;  //正式图片的路径
    uploadObject($data,$path); //存储到云服务器或者本地    
    //save到本地，图片路径是$path;

 

posted on 2018-08-18 08:45  makeinchina  阅读(3220)  评论(0)  编辑  收藏  举报

导航