URL & webkitURL

最新推荐文章于 2021-11-03 22:12:37 发布

转载最新推荐文章于 2021-11-03 22:12:37 发布 · 470 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/iNewbie/p/5710953.html

本文探讨了在Web开发中使用Base64进行图片预览的方法及其带来的问题，包括浏览器性能影响及如何利用FileReader对象和URL.createObjectURL实现更优的图片加载方案。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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 )方法来释放

转载于:https://www.cnblogs.com/iNewbie/p/5710953.html