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

h5上传图片及预览
第一次做图片上传,记录一些问题. 1,图片的base64编码就是可以将一副图片数据编码成一串字符串,使用该字符串代替图像地址.而网页上的每一个图片,都是需要消耗一个http请求下载而来的,使用base ...
js 点击默认另存，不是打开 Blob 操作
function savepic(obj) { if (memFileObj != undefined) { obj = memFileObj; } else { memFileObj = obj; ...
利用exif.js解决ios手机上传竖拍照片旋转90度问题
html5+canvas进行移动端手机照片上传时,发现ios手机上传竖拍照片会逆时针旋转90度,横拍照片无此问题:Android手机没这个问题. 因此解决这个问题的思路是:获取到照片拍摄的方向角,对非 ...
js ajax上传图片到服务器
$("#up_goods_pic").on('change',function(){ var file = this.files[0]; var url = webkitURL.c ...
学习html5的WebSocket连接
1.什么是WebSocket WebSocket 是一种自然的全双工.双向.单套接字连接.使用WebSocket,你的HTTP 请求变成打开WebSocket 连接(WebSocket 或者WebSo ...
利用html5压缩图片，产出base64图片
/* 将页面选择的图片等比压缩成指定大小(长边固定) file:图片文件 callBack:回调函数 maxLen:长边的长度*/function makePic(file,callBack,maxL ...
webSocket学习与应用
非原创,版权归原作者所有http://www.cnblogs.com/shizhouyu/p/4975409.html 1.什么是WebSocket WebSocket 是一种自然的全双工.双向.单套 ...
JavaScript进阶(六)用JavaScript读取和保存文件
用JavaScript读取和保存文件因为Google还不提供同步插件数据的功能,所以导入和导出插件配置就必须和文件打交道了.而出于安全原因,只有IE才提供访问文件的API:但随着HTML 5的到来, ...
基于java webRct webSocket 实现点对点视频（需要源码的请加支付宝好友）
打开支付宝首页搜“555176706”领红包,即可加好友 <%@ page language="java" pageEncoding="UTF-8"%&g ...

随机推荐

注册界面的优化之ActionBar组件的应用之（二）ActionBar组件的事件处理
开发步骤: 重写父类中的一个方法onOptionsItemSelected实现ActionBar中的选项单击事件 //Register_Activity.java public class Regis ...
(转) 学习C++ -> 向量(vector)
vector是向量类型,它是一种对象实体,具有值,所以可以看作是变量. 它可以容纳许多其他类型的相同实体,如若干个整数,所以称其为容器. vector类与一般的Array类的区别在于: 1 ...
angular 中 directive中的多个指令
<div ng-controller="ctrl1"> <superman weight length speed>superman</superma ...
为什么要web语义化
为什么要web语义化其实wiki的定义里面说得非常清晰了.语义化的好处有三点有利于搜索容易兼容不同设备结构清晰,利于团队的开发.维护
PHP内置函数getimagesize()的漏洞
今天程序想压缩一些图片,想获取图片的宽高,在网上查了一下哪些函数可以使用,然后看到getimagesize()这个函数.但是当同事看到这个函数,提醒我说这个函数,运营同事禁止使用.心里就很奇怪,就在网 ...
Eclipse工程乱码解决
eclipse之所以会出现乱码问题是因为eclipse编辑器选择的编码规则是可变的.一般默认都是UTF-8或者GBK,当从外部导入的一个工程时,如果该工程的编码方式与eclipse中设置的编码方式不同 ...
jquery实现二级联动
闲来没事,写点jquery练练手.  var pron_city = { '省':['all'], '北京':[ {'市' ...
【转】android是32-bit系统还是64-bit系统
原文网址:http://www.cnblogs.com/pengwang/archive/2013/03/11/2954496.html 电脑CPU分32位和64位,这个我们都知道.用了这么长时间的a ...
java中classPath和Xpath问题
java中classPath和Xpath问题今天遇到一个问题想获取classpath对应的目录,开始还以为java源代码可以像spring配置文件.xml中一样通过classpath:来获取对应的路 ...
过程化开发2048智力游戏WebApp
时间荏苒,唯编程与青春不可辜负,感觉自己一直没有专心去提升编程的技能,甚是惭愧!!! 周五,无意间看到一个开发2048的视频,有点兴趣就动起手来了,虽然不擅长前端开发,在此献丑,分享一下自己使用过程化 ...

URL & webkitURL

base64带来的坑

js

提示

URL & webkitURL的更多相关文章

随机推荐

热门专题