在使用canvas绘制大尺寸 图片时 发现复制中的 DataUrl 在浏览器中加载不全,于是对 浏览器中加载的Base64 DataURL 的最大长度限制 产生了兴趣
备注: 正常页面中图片正常, 复制出 DataUrl 在新开窗口加载不全
解决方案: 通过调整生成的 base 大小, 实测控制在 500K 之内都可以正常加载
500KB 正常展示(实际上这张图片的实际大小是 500.029296875 KB , 只有小数点后两位的误差,浏览器依旧正常展示)
由于浏览器对base 的图片最多只能支持到 500K 多余的都无法渲染 所以控制台 只能返回的大小刚好是 500KB 下面是实际尺寸的图片
稍大一点
可爱的霉霉只有半张脸了
最后 canvas.toDataUrl 第一个参数是可以指定格式类型的 默认是 png 格式, 如果我们使用 jpeg 格式, 在保证图片品质的同时 也能极大的压缩 DataUrl 的长度。也不失是一个好办法。 当然正常情况也不需要生成这么大的 base, 如果遇到大的图片,常规的方式还是建议使用 Blob 上传至服务器,前端直接使用返回的链接