圖片、音頻獲取二進制流或url的blob值

時間 2019-11-19

原文原文鏈接

一、HTML部分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>

二、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，二進制流
　　　　 };post

　　　　　　//生成url能夠用於頁面顯示this

　　　　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>

三、PHP後臺操做url

// （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;

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。