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. Android Studio稍微较新的版本下载

    ALL ANDROID STUDIO PACKAGES-V1.4.1.2422023 Select a specific Android Studio package for your platfor ...

  2. Emacs入门快捷键

    打开emacs开始一个程序最基本操作: 1.打开Emacs,执行 $ emacs 2.建立一个新的程序文件. 按C-x C-f 然后在屏幕的底部出现minibuffer,光标提示你输入文件名称, 文件 ...

  3. HibernateTemplate用法

    private HibernateTemplate hibernateTemplate; 使用HbernateTemplate HibernateTemplate提供持久层访问模板化,使用Hibern ...

  4. 【solr专题之四】在Tomcat 中部署Solr4.x

    1.安装Tomcat (1)下载并解压至/opt/tomcat中 # cd /opt/jediael # tar -zxvf apache-tomcat-7.0.54.tar.gz # mv apac ...

  5. vim 常用快捷键 二[转]

    键盘移动 (Move) 一切都从键盘的移动k -> 上 upj -> 下 downh -> 左 leftl -> 右 rightz -> 重画屏幕,当前光标变成屏幕的第一 ...

  6. 转：Linux中find命令-path -prune用法详解

    在Windows中可以在某些路径中查找文件,也可以设定不在某些路径中查找文件,下面用Linux中的find的命令结合其-path -prune参数来看看在Linux中怎么实现此功能. 假如在当前目录下 ...

  7. 负载均衡集群之LVS的DR模型详解（Diretor Routing）

    LVS的默认模型:默认模型DR DR模型原理图--> 在讲DR模型要点之前,需要了解网络的相关知识: 接收的报文拆解顺序:帧(MAC)-->数据包(IP)-->数据报文(port) ...

  8. TeXLive安装过程

    Linux系统下TeXLive2016安装教程:http://www.linuxidc.com/Linux/2016-08/133913.htm 安装完成后,在当前用户的 ~/.bashrc 中加入如 ...

  9. socket.setNoDelay([noDelay]) 用的是Nagle算法

    Nagle算法是以他的发明人John Nagle的名字命名的,它用于自动连接许多的小缓冲器消息:这一过程(称为nagling)通过减少必须发送包的个数来增加网络软件系统的效率.Nagle算法于1984 ...

  10. sql 数据库优化

    数据库优化: 1. 显示磁盘秘密: DBCC SHOWCONTIG(B2B_ZRate)  清理磁盘密度 DBCC DBREINDEX(B2B_ZRate) 2.