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. iOS 之 cocoapods安装与使用

    我们都知道第三方库,一般使用cocoapods管理,cocoapods在我们IOS开发中有着很大的作用. 好了,现在看下它的安装步骤: 1.打开终端,输入 sudo gem install cocoa ...

  2. git rm

    git rm可以执行删除的条件(前提是要被删除的文件还没有从workspace tree中移除) git rm可以执行删除的条件:被删除文件在index当中的blob内容必须与HEAD commit指 ...

  3. 一台nginx服务器多域名配置 （转）

    Nginx强大的正则表达式支持,可以使server_name的配置变得很灵活,如果你要做多用户博客,那么每个用户拥有自己的二级域名也就很容易实现了. 下面我就来说说server_name的使用吧: s ...

  4. user密码

    一.修改密码 alter user hr identified by hr; password/passw hr: SYS@test>password hr Changing password ...

  5. Bootstrap的响应式,当文字超过div长度,换行问题的处理!

    (1)overflow: hiddenoverflow 属性规定当内容溢出元素框时发生的事情.这个属性定义溢出元素内容区的内容会如何处理.hidden 表示内容会被修剪,并且剪掉的内容是不可见的. ( ...

  6. 【Python网络编程】多线程聊天软件程序

    课程设计的时候制作的多线程聊天软件程序 基于python3.4.3 import socket import pickle import threading import tkinter import ...

  7. information_schema.optimizer_trace学习

    information_schema.optimizer_trace 用于追踪优化器的优化过程:通常来说这张表中是没有数据的,要想开户追踪要把 @@session.optimizer_trace='e ...

  8. checkbox选中问题

    <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312&qu ...

  9. codecomb 2091【路径数量】

    好久没有更新博客了啊……屯了一堆题没发呢 这是丧心病狂的hzwer每日NOI模拟赛第一天的第一题 妈蛋说好的NOIP难度图论算法两题网络流!让我说什么好 唔……codecomb的页面在晚上就会变得很奇 ...

  10. MATLAB三维曲面

    今天终于测试了,发下来第一张试卷中只会做一小题.我蒙了!!! 所以呢,我现在再做一下,总结总结! 作函数 f(x)=2(x1-1)4+2x22 的三维图. 这道题要用到的知识点有函数meshgrid. ...