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

最新推荐文章于 2024-06-02 18:24:46 发布

weixin_34032621

最新推荐文章于 2024-06-02 18:24:46 发布

阅读量1.5k

点赞数

文章标签： php java 前端 ViewUI

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

版权

1、HTML部分

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--<input id="input" οnchange="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;

转载于:https://www.cnblogs.com/makeinchina/p/9496141.html

weixin_34032621

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
图片、音频获取二进制流或url的blob值

1、HTML部分<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title></head><body><!--<input id="input" onchange="change()" t...
复制链接

扫一扫