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开发实现透明通知栏

    这个特性是andorid4.4支持的,最少要api19才可以使用,也就是说如果Android的机子是低于4.4,沉浸通知栏是没有效果的.下面介绍一下使用的方法,非常得简单. public void i ...

  2. Entity Framework Code First主外键关系映射约定

    本篇随笔目录: 1.外键列名默认约定 2.一对多关系 3.一对一关系 4.多对多关系 5.一对多自反关系 6.多对多自反关系 在关系数据库中,不同表之间往往不是全部都单独存在,而是相互存在关联的.两个 ...

  3. poj 2112 floyd+Dinic最大流+二分最小值

    题目大意是: K台挤奶机器,C头牛,K不超过30,C不超过200,每台挤奶机器最多可以为M台牛工作,给出这些牛和机器之间,牛和牛之间,机器与机器之间的距离,在保证让最多的牛都有机器挤奶的情况下,给出其 ...

  4. < meta http-equiv = "X-UA-Compatible" content = "IE=edge,chrome=1" />的作用

    < meta http-equiv = "X-UA-Compatible" content = "IE=edge,chrome=1" /> 介绍:这 ...

  5. collections——高性能容器数据类型

    由于最近对机器学习算法感兴趣,一直知道python有一个包collections封装了一些比dict,list之类高级点的类,所以抽空研究下,为接下来的工作准备. 主要参考是https://docs. ...

  6. python中print后面加逗号

    python中print输出一行,如果想多次输出的内容不换行,可以在print后面加逗号 例如 每个输出一行 phrase = "abcdefg" # Add your for l ...

  7. H.数7（模拟）

    1212: H.数7 时间限制: 1 Sec  内存限制: 64 MB 提交: 8  解决: 5 标签提交统计讨论版 题目描述 数7是一个简单的饭桌游戏,有很多人围成一桌,先从任意一人开始数数,1.2 ...

  8. 1005 Jugs

    辗转相减,新手入门题.两个容量的灌水题,无所谓最优解. #include<stdio.h> int main(){ int A,B,T,sA,sB; ){ sA=sB=; ){ ){ pr ...

  9. mysql 在启动时配置文件的查找方式

    知识储备: 1.mysql在启动时会去多个地方找它的配置文件,当然啦这些也都是可以从帮助中找到的,问题在于我们要知道怎么找到对应的帮助才行啊 实战: [root@workstudio data]# m ...

  10. nodejs 如何使用upgrade，并且C/B 发送消息

    1 const http = require('http'); const querystring = require("querystring"); var postData = ...