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. PHP学习笔记二十二【静态方法二】

    <?PHP class Student{ public static $fee; public $name; //构造函数 function __construct($name) { $this ...

  2. qq去广告

    首先呢,在文件资源管理器中选择查看"隐藏的项目"或"显示隐藏的文件.文件夹和驱动器"(入口不一样,选择显示隐藏文件的方式也不一样),随后进入 C:\Users\ ...

  3. Gengxin讲STL系列目录

    引言:有人催我写关于STL的博客#(滑稽)        STL嘛,昨晚有人一直逼问我STL名字的由来——STL = Standard Template Library,标准模板库,惠普实验室开发的一 ...

  4. C# 加密可逆

    现在一直在做一个小软件,公司的通讯录系统,也没什么功能增删改查,这算是我来这个公司实习的第一件事吧. 在修改个人信息的时候一直对于密码显示这个存在矛盾,不知道应该是要哪种形式去做,后来自己就先用md5 ...

  5. deepin 2014 安装后 ，grub出错

    今天deepin2013一直出错,就想尝试下2014,so,果断下载安装,然后悲剧的又被坑了. 环境win7位于sda,deepin安装在sdb 安装完毕后,启动报错,找不到设备uuid 无奈之下,重 ...

  6. 闲聊之Python的数据类型 - 零基础入门学习Python005

    闲聊之Python的数据类型 让编程改变世界 Change the world by program Python的数据类型 闲聊之Python的数据类型所谓闲聊,goosip,就是屁大点事可以咱聊上 ...

  7. CodeForces 25E Test KMP

    Description Sometimes it is hard to prepare tests for programming problems. Now Bob is preparing tes ...

  8. Taurus.MVC

    开源:Taurus.MVC 框架 为什么要创造Taurus.MVC: 记得被上一家公司忽悠去负责公司电商平台的时候,情况是这样的: 项目原版是外包给第三方的,使用:WebForm+NHibernate ...

  9. USB系列之四：向U盘上写数据

    在<USB系列之三>中,我们实现了一系列的SCSI命令,在这个系列中,我们要实现向U盘上写扇区的命令,所以,本文相对比较容易,更多地是给出一个实现的源程序. 在<USB系列之三> ...

  10. GUI为什么不设计为多线程（用户事件和底层事件的流程是相反的，每层都加锁效率太低，共用一把锁那就是单线程）

    在我们这批新人转正评审的时候,我师父问了我的小伙伴一个问题:为什么一些更新界面的方法只能在主线程中调用?师父没有问我这个问题,让知其然但不知其所以然的我有种侥幸逃过一难的心情.我想如果回答那是因为An ...