相关疑难解决方法(0)

将blob转换为base64

这是我要BlobBase64字符串执行的代码的代码段:

这个注释部分有效,当由此生成的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字符串,如上面的代码?

javascript jquery

109
推荐指数
11
解决办法
16万
查看次数

将blob URL转换为普通URL

我的页面生成如下URL:"blob:http%3A//localhost%3A8383/568233a1-8b13-48b3-84d5-cca045ae384f"如何将其转换为普通地址?

我使用它作为一个<img>src属性.

javascript url blob

82
推荐指数
3
解决办法
17万
查看次数

使用jQuery的ajax方法将图像检索为blob

我最近问了另一个(相关的)问题,这导致了这个后续问题: 提交数据而不是输入表单的文件

通过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?

javascript jquery

72
推荐指数
3
解决办法
9万
查看次数

从XHR请求获取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标记中:

谁知道如何实现这一目标?

先感谢您!

javascript webkit blob xmlhttprequest

35
推荐指数
4
解决办法
8万
查看次数

如何在反应中下载文件

我收到文件网址作为api的回复.当用户单击下载按钮时,应该下载该文件而不在新选项卡中打开文件预览.如何实现这个反应js?

javascript download reactjs

20
推荐指数
13
解决办法
7万
查看次数

Youtube Blob网址在浏览器中不起作用,但在src中不起作用

我知道没有blob网址只有对象.
我为视频缓冲区创建了自己的blob对象,然后在视频标记的src中使用它,类似于blob://website.com/blablobbla.我在它工作的浏览器中打开了这个url

当我打开youtube视频src(blob url)的url到一个新标签时,它没有用,但是我的视频src(blob url)工作了

我想知道如何对我的blob网址执行相同操作,以便它们只能在html视频标记的src中工作,并且在浏览器的外部选项卡/窗口中发出错误或不起作用.我只是想知道这个和blob对象及其url属性背后的技术.

javascript url blob fileapi media-source

14
推荐指数
2
解决办法
8166
查看次数

如何使用FileReader API从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上传图像?

我怎么能够?有什么建议?

javascript jquery html5 filereader

13
推荐指数
1
解决办法
2万
查看次数

从Android WebViewClient中的网站下载Blob文件

我有一个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()但行为是相同的.

javascript android blob android-webview

7
推荐指数
1
解决办法
7908
查看次数

在 React Redux 存储中存储文件对象的最佳方式(从 DropZone 上传文件?)

我目前正在使用 Material Ui dropzone 上传多个文件。只是想知道在 redux 存储中添加/更新文件的最佳方法是什么。我目前正在执行“onChange”触发时的调度操作,该操作返回 dropzone 上的所有文件并通过存储具有 files 对象的整个 files 数组来更新 redux 状态。

请让我知道是否有最好的方法来处理这个问题。

reactjs redux material-ui react-dropzone dropzone

7
推荐指数
2
解决办法
2850
查看次数

如何在Android上的WebView中读取Blob中的数据?

我有一个服务器在浏览器上创建一个对象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?任何帮助,将不胜感激.

android blob android-webview

6
推荐指数
2
解决办法
8083
查看次数

RecorderJS通过AJAX上传记录的blob

我正在使用Matt Diamond的recorder.js来浏览HTML5音频API,感觉这个问题可能有一个明显的答案,但我找不到任何具体的文档.

问题:录制wav文件后,如何通过ajax将该wav发送到服务器?有什么建议???

audio ajax upload html5 recorder

4
推荐指数
1
解决办法
8851
查看次数

在blob:url上混淆并将其转换为react-dropzone中的base64

我正在使用包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?

blob ecmascript-6 reactjs

2
推荐指数
1
解决办法
3747
查看次数