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;