blob

window.URL对象的使用方式 window对象的URL对象是专门用来将blob或者file读取成一个url。 一、URL构造函数将普通url转换成URL对象 var url = new URL('https://my.oschina.net/u/4291402?name=test'); console.log('url' , url, url.searchParams.get("name")); //输出 test 二、URL.createObjectURL(object) URL.createObjectURL(object)是URL对象的静态方法，其实就是返回了一个在内存中指向传入参数object的引用路径url字符串。生成的这个url字符串会在当前页面的document被销毁的时候失效。 三、URL.revokeObjectURL(objectURL) 用于销毁之前通过URL.createObjectURL(object)方法创建的url。 四、案例 文件下载 let content = new Blob(); const saveLink = document.createElement('a'); document.body.appendChild(saveLink); const url = window.URL.createObjectURL(content);

项目中需要利用百度语音接口在Web端实现语音识别功能，采用了这样的技术方案，但实现时遇到了很多问题，发现网上大部分文章都只是在详解官方提供的example示例，对实际开发没有提供什么有价值的建议，而 recorder.js 是无法直接适配百度AI的语音接口的，故本篇将开发中各个细节点记录与此，欢迎指点交流。 一. 技术栈选择 需求 ：利用百度语音接口在Web端实现语音识别功能 技术栈 ： React + recorder-tool.js + recorder.js + Express + Baidu语音识别API recorder.js 项目地址: https://github.com/mattdiamond/Recorderjs 演示效果 ： 二. 前端开发细节 为recorder.js提供一个代理对象 前端的主框架采用 React ，在基本结构和语法上并没有太多问题，为了使用 recorder.js ，我们封装了一个 recorder-tool.js 作为代理，其实现方法较为简单，就是将官方示例中 example 示例中的 html 文件的脚本部分封装成一个单例对象作为 recorder.js 的代理，然后暴露一组 API 供上层调用，大致的结构如下： import Recorder from './recorder-src'; //Singleton var recorder

后台可以通过提供下载链接的方式让前端完成下载功能，这个多简单多粗暴多招人喜欢，只要location.href=`${url}`或者window.open(`${url}`)就结束了。 但是后台也会通过另一种方式提供下载，即前端请求接口返回二进制数据的方式。这种方式个人认为好处就是可以在网络延时比较大的时候，方便加个loading吧，谁知道呢。 那么，第二种方式前端要如何搞定呢，主要是使用Blob的方式，这个地方没啥太复杂的，直接上代码了 const download = (res, name) => { const blob = new Blob([res]) if (window.navigator && window.navigator.msSaveOrOpenBlob) { window.navigator.msSaveOrOpenBlob(blob, name); } else { const url = window.URL.createObjectURL(blob); const a = document.createElement("a"); a.href = url; a.setAttribute("download", name); document.body.appendChild(a); a.click(); a.remove(); window.URL

最近 做项目，做的要是拍照后上传相片，以file格式上传。。所以 拍照 后用canvas生成base64格式再转file。。在PC和安卓都是没有问题，到IOS上面不行。。new file后就是生成一个{}； 查了下file对象 ，支持的浏览器如下： 接口文档 上面 介绍的是file也是 特殊的类型blob： 而blob对象支持 主流 的浏览器 。所以转换为blob再转成file来上传，代码 如下： //转成blob function dataURLtoBlob ( toDataURL ) { var arr = toDataURL . split ( "," ) , mime = arr [ 0 ] . match ( /:(.*?);/ ) [ 1 ] , bstr = atob ( arr [ 1 ] ) , n = bstr . length , u8arr = new Uint8Array ( n ) ; while ( n -- ) { u8arr [ n ] = bstr . charCodeAt ( n ) ; } return new Blob ( [ u8arr ] , { type : mime } ) ; } 　　　　 //转成file function blobToFile ( Blob , fileName ) { Blob .

1.图片跨域问题 在html转化为canvas在转化成图片地址的 时候 canvas.toDataURL("image/png") 遇到报错： Access to image at 'png' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https. 或者 Access to image at 'www.baidu.com/GT/github/hotelAdmin/img/tempalte-top.png' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https. 报错原因 就是 图片 跨域 污染了画布，导致画布不能导出img的地址 在网上找方法 设置： useCORS: true, //（图片跨域相关） allowTaint: false, //允许跨域

axios({ method: 'get', url: '/api/group/export', params: data, headers: { Authentication: localStorage.getItem('token'), Accept: 'application/vnd.openxmlformats-officedocument' }, responseType: 'blob' }).then(response => { console.log(response.data); const blob = new Blob([response.data], {type: 'application/zip'}); const filename = response.headers['content-disposition']; const downloadElement = document.createElement('a'); const href = window.URL.createObjectURL(blob); //创建下载的链接 console.log(href); downloadElement.href = href; [downloadElement.download] = [filename.split('=')[1]]; document

后端代码 返回outputStream流到前端 @RequestMapping(value = "/migration",method = RequestMethod.POST) public void migration(HttpServletResponse response, @RequestParam("files")MultipartFile[] multipartFile) throws Exception { String codedFileName = "EN"; response.setHeader("Content-Disposition", "attachment;filename=" + codedFileName + ".xml"); // 响应类型,编码 response.setContentType("application/octet-stream;charset=UTF-8"); // 形成输出流 OutputStream osOut = response.getOutputStream(); File xmlFileC = new File("/databaseclient/src/main/resources/Files/EN2.xml"); InputStream input = null; try { input = new

上传我们一般都是用“ input[type=file] ”控件。当你用此控件时，你就授权了网页和服务器访问对应的文件，就可以得到 File 对象。 友情提示在，在Android手机webview中，是不支持上传文件的，网上说是修改Android端的代码，但我没试过，我们这边是使用客户端提供的接口来实现上传的。 下面的示例代码可以在 这里 查看到。 一、accept属性 该属性表明了服务器端可接受的文件类型，可以限制你手机选择相关的文件，如果限制多个，可以用逗号分割，下面的代码就表示只能选择图片与音频相关的文件： <input accept="image/*,audio/*" type="file"/> 在移动端，点击后会让你选择拍照或相册，还是蛮高大上的。下图是UC浏览器中： 二、change事件 一般选择文件都会使用“change”事件，下面的代码就是绑定了change事件，弹出文件大小： var upload = document.getElementById('upload'); upload.addEventListener('change', function() { var file = upload.files[0]; alert(file.size); }, false); 1） 有些手机浏览器在点击的时候，会弹出键盘选择，我用onfocus="this.blur(

简介：Windows Azure Storage（WAS）是微软的一种分布式云存储系统，允许用户在上面存储数据，并且存储空间可以无限增长（表面上）。WAS中，数据存储在分布式系统中。WAS可以存储Blobs（文件），tables（结构化存储），Queues（消息队列），这篇文章主要总结了WAS的架构，全局定义和一些数据模型。 关键词：云计算，分布式存储系统，Windows Azure 第一部分：介绍 　　WAS是一种可扩展的的云存储技术，在2008年开始时上线，在微软的内部开始使用。WAS给出的格式是Blobs（文件），tables（结构化存储），Queues（消息队列），这三种格式的数据几乎提供了所有的存储形式，可以应用到大多数的应用中，最常见的一种存入取出的形式就是blobs，也就是各种形式的文件数据。queue提供了数据流的形式，最终也是以blob和tables的形式存储。 　　一个例子，构建在WAS中的一个引擎可以提供近乎实时的Facebook和Twitter的搜索服务。这种服务是一种大数据流水线计算的一部分，来提供可搜索的内容（15秒内用户的消息和状态更新）,内容还是以blobs存储。引擎可以解析用户的各种信息记录等，分类。信息被分类整理好以后，交给bing引擎去搜索。这个解析引擎会使用queue来管理流数据，做索引以及发送给搜索引擎的耗时。在这篇论文发表的时候

目前在IT界，云这个概念的第一意思不再是词典里的解释了。不过它们还是有相同点的——也许确实会酝酿出一块大蛋糕，可也是飘在天上，众神分食之，与我等P民无关。所谓云，不过是网络时代发展到一定阶段的必然产物，而并非划时代的技术质变，so，我一直保持既不排斥亦不主动接触的立场。but，最近我有个个人服务器快到期了，于是也打算尝试一番。 现在比较知名的云服务有很多，国内的首推阿里云，而作为.Neter， Windows Azure 也是一种选择。本人同时申请了两者的免费试用体验，对于阿里云，在申请阶段博主被折腾得够呛，后面可能会写一篇吐槽的随笔；相对来说，Windows Azure价格昂贵，不过既然是免费体验（90天），试试亦无妨。 目前Windows Azure在国内由世纪互联运营，比较坑的是很多服务国内还没有开始运营。另外不能使用微软账号登录Windows Azure管理门户，而是使用在注册域名时填写的用户ID。假如您注册的域名是xxxx.partner.onmschina.cn，那么您的登录账号就是“用户ID@xxxx.partner.onmschina.cn”。不出意外的话，申请之后两三天，你就能收到一份告知通过的邮件。 前几天又去Windows Azure中国首页看了下，发现官网已经不再接受新的试用申请，应该说博主搭了一趟末班车，运气！(截止到博主发文，Windows