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的更多相关文章

  1. h5上传图片及预览

    第一次做图片上传,记录一些问题. 1,图片的base64编码就是可以将一副图片数据编码成一串字符串,使用该字符串代替图像地址.而网页上的每一个图片,都是需要消耗一个http请求下载而来的,使用base ...

  2. js 点击默认另存 ，不是打开 Blob 操作

    function savepic(obj) { if (memFileObj != undefined) { obj = memFileObj; } else { memFileObj = obj; ...

  3. 利用exif.js解决ios手机上传竖拍照片旋转90度问题

    html5+canvas进行移动端手机照片上传时,发现ios手机上传竖拍照片会逆时针旋转90度,横拍照片无此问题:Android手机没这个问题. 因此解决这个问题的思路是:获取到照片拍摄的方向角,对非 ...

  4. js ajax上传图片到服务器

    $("#up_goods_pic").on('change',function(){ var file = this.files[0]; var url = webkitURL.c ...

  5. 学习html5的WebSocket连接

    1.什么是WebSocket WebSocket 是一种自然的全双工.双向.单套接字连接.使用WebSocket,你的HTTP 请求变成打开WebSocket 连接(WebSocket 或者WebSo ...

  6. 利用html5压缩图片，产出base64图片

    /* 将页面选择的图片等比压缩成指定大小(长边固定) file:图片文件 callBack:回调函数 maxLen:长边的长度*/function makePic(file,callBack,maxL ...

  7. webSocket学习与应用

    非原创,版权归原作者所有http://www.cnblogs.com/shizhouyu/p/4975409.html 1.什么是WebSocket WebSocket 是一种自然的全双工.双向.单套 ...

  8. JavaScript进阶(六)用JavaScript读取和保存文件

    用JavaScript读取和保存文件 因为Google还不提供同步插件数据的功能,所以导入和导出插件配置就必须和文件打交道了.而出于安全原因,只有IE才提供访问文件的API:但随着HTML 5的到来, ...

  9. 基于java webRct webSocket 实现点对点视频 （需要源码的请加支付宝好友）

    打开支付宝首页搜“555176706”领红包,即可加好友 <%@ page language="java" pageEncoding="UTF-8"%&g ...

随机推荐

  1. jsp页面获取服务器时间

    Calendar c = Calendar.getInstance(); int year = c.get(Calendar.YEAR); int month = c.get(Calendar.MON ...

  2. 本地计算机上的OracleOraDb11g_home2TNSListener服务启动又停止了。

    电脑上装了oracle后启动很慢,然后我就不oracle服务设置成手动启动,没想到今天启动的时候居然报错 折腾了一上午,终于搞定, 在环境变量中把ORACLE_HOME 设置成D:\app\XL\pr ...

  3. 使用oracle来计算方差及标准差

    /* Formatted on 5/24/2012 4:15:58 PM (QP5 v5.149.1003.31008) */ SELECT deptno,       ename,          ...

  4. javascript延迟加载及异步(defer和async)

    一直以来写代码的时候的常用习惯就是吧所有的js文件直接加载在文档的head标签里面,在写js文件的时候有时候获取一些文件对象的时候为空对象,这是由于文档结构还没有加载完,但是js文件已经加载完.也就是 ...

  5. Hibernate常见接口说明

    (一)SessionFactory 1. getCurrentSession()和openSession()区别 getCurrentSession创建的session会和绑定到当前线程,而openS ...

  6. SQL语句 计算某段时间工作日的天数（除了周六日）

    --只是加了固定日期,可以根据需求给成变量形式(BY 少年工藤) -思路:根据日期区间循环判断每一天是周日(1).周六(7)不变,其他加1 1 DECLARE @DAY DATE,@COUNT INT ...

  7. 那些我希望在一开始使用 Zsh(oh-my-zsh) 时就知道的

    原文地址:http://segmentfault.com/a/1190000002658335  作者:xavier 自带的插件 其实我用了 oh-my-zsh 快三个月后才知道原来他自带了很多插件没 ...

  8. 检测.net framework 版本

    项目中,自己要制作asp.net项目的安装文件,由于项目依赖于.net framework 3.5 sp1,故需检测环境是否符合要求,才能安装程序 度娘找到检测方案:各.net版本对应的安装补录下都有 ...

  9. ccf练习---节日

    问题描述 有一类节日的日期并不是固定的,而是以“a月的第b个星期c”的形式定下来的,比如说母亲节就定为每年的五月的第二个星期日. 现在,给你a,b,c和y1, y2(1850 ≤ y1, y2 ≤ 2 ...

  10. KEIL C51中const和code的使用

    code是KEIL C51 扩展的关键字,用code修饰的变量将会被放到CODE区里.但C语里的const关键字好像也有定义不能改变的变量的功能,这两个关键字有什么区别呢?在帮助手册里查找const, ...