URL & webkitURL
base64带来的坑
在web中想要是实现图片在线预览的方式有几种
1、先上传
2、使用FileReader
对象
3、URL.createObjectURL(file|blob)
base64 能将图片读取成同样大小的base64字符,这样html文件也就随之增大,造成的无非是浏览器卡顿,每一次新的渲染都会很慢
js
var window.URL = window.URL | window.webkitURL;
objectURL = URL.createObjectURL(blob | file);
// objectURL --> blob:http%3A//127.0.0.1%3A8020/32b4467f-5870-44dd-a119-fddf4e6f8f94
提示
1、然而该方法兼容性并不高,只支持chrome 8, firefox4, ie10(fuck),15, safari6
2、官方强调:在每次调用 createObjectURL() 方法时,都会创建一个新的 URL 对象,即使你已经用相同的对象作为参数创建过。
每个对象必须通过调用URL.revokeObjectURL(objectURL )
方法来释放
URL & webkitURL的更多相关文章
- h5上传图片及预览
第一次做图片上传,记录一些问题. 1,图片的base64编码就是可以将一副图片数据编码成一串字符串,使用该字符串代替图像地址.而网页上的每一个图片,都是需要消耗一个http请求下载而来的,使用base ...
- js 点击默认另存 ,不是打开 Blob 操作
function savepic(obj) { if (memFileObj != undefined) { obj = memFileObj; } else { memFileObj = obj; ...
- 利用exif.js解决ios手机上传竖拍照片旋转90度问题
html5+canvas进行移动端手机照片上传时,发现ios手机上传竖拍照片会逆时针旋转90度,横拍照片无此问题:Android手机没这个问题. 因此解决这个问题的思路是:获取到照片拍摄的方向角,对非 ...
- js ajax上传图片到服务器
$("#up_goods_pic").on('change',function(){ var file = this.files[0]; var url = webkitURL.c ...
- 学习html5的WebSocket连接
1.什么是WebSocket WebSocket 是一种自然的全双工.双向.单套接字连接.使用WebSocket,你的HTTP 请求变成打开WebSocket 连接(WebSocket 或者WebSo ...
- 利用html5压缩图片,产出base64图片
/* 将页面选择的图片等比压缩成指定大小(长边固定) file:图片文件 callBack:回调函数 maxLen:长边的长度*/function makePic(file,callBack,maxL ...
- webSocket学习与应用
非原创,版权归原作者所有http://www.cnblogs.com/shizhouyu/p/4975409.html 1.什么是WebSocket WebSocket 是一种自然的全双工.双向.单套 ...
- JavaScript进阶(六)用JavaScript读取和保存文件
用JavaScript读取和保存文件 因为Google还不提供同步插件数据的功能,所以导入和导出插件配置就必须和文件打交道了.而出于安全原因,只有IE才提供访问文件的API:但随着HTML 5的到来, ...
- 基于java webRct webSocket 实现点对点视频 (需要源码的请加支付宝好友)
打开支付宝首页搜“555176706”领红包,即可加好友 <%@ page language="java" pageEncoding="UTF-8"%&g ...
随机推荐
- MongoDb笔记(一)
1.Mongodb 数据库是动态生成的可以使用use 数据库名 来指定要使用的数据库,如果数据库不存在就自动生成一个 2.插入一个文档:db.foo.insert({"name": ...
- javaScript表单焦点自动切换
---恢复内容开始--- <html> <head> <script> window.onload=function(){ var form=document.ge ...
- struts2 注解方式
struts2扫描方法: 扫描其位于包的命名注解的类 “struts, struts2, action 或 actions“. 接着,扫描相匹配下列任一条件的文件: 实例了 com.opensymph ...
- (原)opencv中使用限制对比度自适应直方图均衡CLAHE
转载请注明出处: http://www.cnblogs.com/darkknightzh/p/5462656.html Ptr<CLAHE> clahe = createCLAHE(); ...
- PLSQL在cmd命令行中的基本用法
首先:set serveroutput on:设置打印 declareresult number;beginselect (sal*12)+nvl(comm,0) into result from e ...
- find系列之xargs命令
xargs的功能--> 将标准输入转换为命令行参数,供后面的命令调用,但是一次只能依据-d和-n限定的行数来推送一行 xargs的作用--> 使那些不能利用stdin的命令 ...
- Proud Merchants(POJ 3466 01背包+排序)
Proud Merchants Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 131072/65536 K (Java/Others) ...
- oc语言--语法
一.OC简介 1.简介 它是C语言的基础上,增加了一层面向对象语法 OC完全兼容C语言 可以在OC代码中混入C语言代码,甚至是C++代码 可以使用OC开发mac OS X平台和IOS平台的应用程序 2 ...
- KeyTool
http://ln-ydc.iteye.com/blog/1335213 http://lukejin.iteye.com/blog/605634
- SCSI磁盘标准的架构与文档
来自scsi标准的官方网站http://t10.org/,具体的文档可以去浏览官方网站. (*) This chart reflects the currently approved SCSI pro ...