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

最新推荐文章于 2023-01-10 10:25:19 发布

转载最新推荐文章于 2023-01-10 10:25:19 发布 · 1.6k 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/makeinchina/p/9496141.html

文章标签：

#php #java #前端 #ViewUI

本文介绍了一种将网页中的图片转换为MP3文件的方法，包括前端使用HTML、JavaScript实现图片到二进制流的转换，并通过PHP后端将二进制流数据保存为MP3文件的过程。

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;