浏览器中加载的Base64 DataURL 的最大长度限制

2,581 阅读1分钟

在使用canvas绘制大尺寸 图片时 发现复制中的 DataUrl 在浏览器中加载不全,于是对 浏览器中加载的Base64 DataURL 的最大长度限制 产生了兴趣

备注: 正常页面中图片正常, 复制出 DataUrl 在新开窗口加载不全

解决方案: 通过调整生成的 base 大小, 实测控制在 500K 之内都可以正常加载

500KB 正常展示(实际上这张图片的实际大小是 500.029296875 KB , 只有小数点后两位的误差,浏览器依旧正常展示)

由于浏览器对base 的图片最多只能支持到 500K 多余的都无法渲染 所以控制台 只能返回的大小刚好是 500KB 下面是实际尺寸的图片

image (1).png 稍大一点

image (2).png 可爱的霉霉只有半张脸了

image (3).png

最后 canvas.toDataUrl 第一个参数是可以指定格式类型的 默认是 png 格式, 如果我们使用 jpeg 格式, 在保证图片品质的同时 也能极大的压缩 DataUrl 的长度。也不失是一个好办法。 当然正常情况也不需要生成这么大的 base, 如果遇到大的图片,常规的方式还是建议使用 Blob 上传至服务器,前端直接使用返回的链接