这是我要Blob对Base64字符串执行的代码的代码段:
这个注释部分有效,当由此生成的URL设置为img src时,它会显示图像:
var blob = items[i].getAsFile();
//var URLObj = window.URL || window.webkitURL;
//var source = URLObj.createObjectURL(blob);
//console.log("image source=" + source);
var reader = new FileReader();
reader.onload = function(event){
console.log(event.target.result)
}; // data url!
var source = reader.readAsBinaryString(blob);
Run Code Online (Sandbox Code Playgroud)
问题是代码越低,生成的源变量为null
更新:
有没有更简单的方法来使用JQuery从Blob文件创建Base64字符串,如上面的代码?
我的页面生成如下URL:"blob:http%3A//localhost%3A8383/568233a1-8b13-48b3-84d5-cca045ae384f"如何将其转换为普通地址?
我使用它作为一个<img>的src属性.
我最近问了另一个(相关的)问题,这导致了这个后续问题: 提交数据而不是输入表单的文件
通过jQuery.ajax()文档(http://api.jquery.com/jQuery.ajax/)阅读,似乎接受的dataTypes列表不包含图像.
我正在尝试使用jQuery.get(或jQuery.ajax,如果必须)检索图像,将此图像存储在Blob中并将其上传到POST请求中的另一台服务器.目前,看起来由于数据类型不匹配,我的图像最终被破坏(大小以字节不匹配等).
执行此操作的代码如下(它在coffeescript中但不应该难以解析):
handler = (data,status) ->
fd = new FormData
fd.append("file", new Blob([data], { "type" : "image/png" }))
jQuery.ajax {
url: target_url,
data: fd,
processData: false,
contentType: "multipart/form-data",
type: "POST",
complete: (xhr,status) ->
console.log xhr.status
console.log xhr.statusCode
console.log xhr.responseText
}
jQuery.get(image_source_url, null, handler)
Run Code Online (Sandbox Code Playgroud)
如何将此图像检索为blob?
var xhr = new XMLHttpRequest();
xhr.open('GET', 'http://static.reddit.com/reddit.com.header.png', true);
xhr.responseType = 'arraybuffer';
xhr.onload = function(e) {
if (this.status == 200) {
var uInt8Array = new Uint8Array(this.response);
var byte3 = uInt8Array[4];
var bb = new WebKitBlobBuilder();
bb.append(xhr.response);
var blob = bb.getBlob('image/png');
var base64 = window.btoa(blob);
alert(base64);
}
};
xhr.send();
Run Code Online (Sandbox Code Playgroud)
基本上,我在这里尝试做的是检索图像,并将其转换为base64.
通过阅读这里的评论,它说"当然.在将资源作为ArrayBuffer获取后,从中创建一个blob.一旦你有了,你可以直接对文件/ blob进行base64编码(window.btoa())或FileReader. readAsDataURL()".
然而,window.btoa()只是[对象blob],而我需要从图像中获取二进制文件,以便我可以将其转换为base64并使用数据将其显示在img标记中:
谁知道如何实现这一目标?
先感谢您!
我收到文件网址作为api的回复.当用户单击下载按钮时,应该下载该文件而不在新选项卡中打开文件预览.如何实现这个反应js?
我知道没有blob网址只有对象.
我为视频缓冲区创建了自己的blob对象,然后在视频标记的src中使用它,类似于blob://website.com/blablobbla.我在它工作的浏览器中打开了这个url
当我打开youtube视频src(blob url)的url到一个新标签时,它没有用,但是我的视频src(blob url)工作了
我想知道如何对我的blob网址执行相同操作,以便它们只能在html视频标记的src中工作,并且在浏览器的外部选项卡/窗口中发出错误或不起作用.我只是想知道这个和blob对象及其url属性背后的技术.
在html表单中,我们有一个图像字段,用于上传文件.我从http://blog.teamtreehouse.com/reading-files-using-the-html5-filereader-api上学习了教程,从本地磁盘上传图像文件时效果很好.
但是假设我有一个图片网址,请说http://www.google.com/images/logos/ps_logo2.png并希望从远程网址上传此图片,而不是从本地磁盘上传.
FileReader 从本地磁盘尝试上传图像时,API运行良好,但我们如何使用它来按网址加载图像?
base64通过在图像字段中设置,可以轻松创建图像并将其用于预览,<img src='data:image/png;base64,iAks4ds__base64__string' id='user_img'>但是应该采用哪种工作流来使用jQuery或JavaScript从远程URL上传图像?
我怎么能够?有什么建议?
我有一个HTML网页,其中有一个按钮,当用户点击时会触发POST请求.请求完成后,将触发以下代码:
window.open(fileUrl);
Run Code Online (Sandbox Code Playgroud)
浏览器中的一切都很好用,但是当在Webview组件内部实现时,新选项卡不会打开.
仅供参考:在我的Android应用程序中,我设置了以下内容:
webview.getSettings().setJavaScriptEnabled(true);
webview.getSettings().setSupportMultipleWindows(true);
webview.getSettings().setJavaScriptCanOpenWindowsAutomatically(true);
Run Code Online (Sandbox Code Playgroud)
在AndroidManifest.xml我有以下权限:
<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
<uses-permission android:name="android.permission.ACCESS_DOWNLOAD_MANAGER"/>
Run Code Online (Sandbox Code Playgroud)
我也试着setDownloadListener去抓下载.另一种方法被替换为WebViewClient()for,WebChromeClient()但行为是相同的.
我目前正在使用 Material Ui dropzone 上传多个文件。只是想知道在 redux 存储中添加/更新文件的最佳方法是什么。我目前正在执行“onChange”触发时的调度操作,该操作返回 dropzone 上的所有文件并通过存储具有 files 对象的整个 files 数组来更新 redux 状态。
请让我知道是否有最好的方法来处理这个问题。
我有一个服务器在浏览器上创建一个对象blob,我想在Android应用程序的WebView中下载它.我尝试将请求重定向到浏览器实例以及使用下载管理器执行此操作,但它们似乎都不起作用(即使我在Chrome中打开相同的页面,下载操作也在那里工作).
我尝试了以下代码,它抛出错误:
Android.content.ActivityNotFoundException:找不到处理Intent的活动{act = android.intent.action.VIEW dat = blob:https%3A // 111.111.111.111%3A8080/40b63131-63b1-4fa4-9451-c6297bbd111a"
编辑
Android.content.ActivityNotFoundException:找不到处理Intent的Activity {act = android.intent.action.VIEW dat = blob:http://digitalinsensu.com/0f0d6127-a0f1-44c3-af85-72f648258d6d
码:
mWebView.setDownloadListener(new DownloadListener() {
public void onDownloadStart(String url, String userAgent,String contentDisposition, String mimetype,long contentLength) {
Intent i = new Intent(Intent.ACTION_VIEW);
i.setData(Uri.parse(url));
startActivity(i);
}
});
Run Code Online (Sandbox Code Playgroud)
这会抛出java.lang.IllegalArgumentException:只能下载HTTP/HTTPS URIs错误:
mWebView.setDownloadListener(new DownloadListener() {
public void onDownloadStart(String url, String userAgent,String contentDisposition, String mimetype,long contentLength) {
DownloadManager.Request request = new DownloadManager.Request(Uri.parse(url));
request.allowScanningByMediaScanner();
request.setNotificationVisibility(DownloadManager.Request.VISIBILITY_VISIBLE_NOTIFY_COMPLETED);
request.setDestinationInExternalPublicDir(Environment.DIRECTORY_DOWNLOADS, "download");
DownloadManager dm = (DownloadManager) getSystemService(DOWNLOAD_SERVICE);
dm.enqueue(request);
}
});
Run Code Online (Sandbox Code Playgroud)
我该如何下载blob?任何帮助,将不胜感激.
我正在使用Matt Diamond的recorder.js来浏览HTML5音频API,感觉这个问题可能有一个明显的答案,但我找不到任何具体的文档.
问题:录制wav文件后,如何通过ajax将该wav发送到服务器?有什么建议???
我正在使用包react-dropzone(https://github.com/okonet/react-dropzone)从用户获取图像。用户上传了他们的图像,一切都很好,但是我只能从中得到“ blob:http // blahblah”之类的东西,我需要将图像设置为base64 png。
我的dropzone组件:
<Dropzone ref="dropzone" multiple={false} onDrop={this.onDrop.bind(this)} >
{this.state.files ?<img className="img-responsive" src={this.state.files[0].preview}></img>
: <div>Upload Photo</div> }
</Dropzone>
Run Code Online (Sandbox Code Playgroud)
以及获取blob网址的drop函数:
onDrop (files ) {
if ( files.length === 0 ) {
alert("upload img please")
return;
}
console.log('Received files: ', files);
this.setState({files:files})
var blobURL = files[0].preview
var reader = new FileReader();
reader.readAsDataURL(blobURL)
}
Run Code Online (Sandbox Code Playgroud)
我会得到一个错误:Uncaught TypeError: Failed to execute 'readAsDataURL' on 'FileReader': parameter 1 is not of type 'Blob'.
我认为这是因为即时通讯试图传递指向blob的object-url,但是我在哪里可以获取blob以便转换为base64?
javascript ×8
blob ×6
jquery ×3
reactjs ×3
android ×2
html5 ×2
url ×2
ajax ×1
audio ×1
download ×1
dropzone ×1
ecmascript-6 ×1
fileapi ×1
filereader ×1
material-ui ×1
media-source ×1
recorder ×1
redux ×1
upload ×1
webkit ×1