欢迎光临
我们一直在努力

7 行 JS 代码获取最简短的 base64 格式纯色占位图

有时候为了网站速度,我们不希望有些不必要的图片提前加载,于是使用占位图代替。占位图片可以是纯色的,也可以是个性化的。占位图有很多种选择,大家可以查阅小影的这篇文章 ☞ 10 个优秀的占位图服务

但是,占位图也有缺点,就是也需要连接和加载时间。如果一张占位图过大,体验是不好的。那么,为了更快的加载占位图,可以直接使用 data 类型的图片格式,就是 data:image/png;base64,XXX 这种。这种格式的图片存储于页面内,浏览器直接加载,非常快。

这时你是不是打算把占位图转换为 base64 ?

没错,你的打算是对的。但是!

不管多小的图片,转换后 base64 数据都会很长,这么长的数据嵌入页面,难看啊。。。

怎么办?!

很简单,只需 7 行代码,就能得到最简短的 base64 纯色图片(划重点),看代码:

var canvas = document.createElement('canvas');
var ctx = canvas.getContext('2d');
canvas.width = 1;
canvas.height = 1;
ctx.fillStyle = '#f5f5f5';
ctx.fillRect(0, 0, 1, 1);
console.log(canvas.toDataURL());

以上代码会输出:

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVQIW2P8+vXrfwAJpgPg8gE+iwAAAABJRU5ErkJggg==

这段代码我们使用 canvas 绘制一张 1x1 的图片,然后铺上 #f5f5f5 的颜色,最后通过 toDataURL() 拿到 URL 格式的数据。

注意到没有,我们限制了 canvas 的宽高为 1,如果不限制,会输出:

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAASwAAACWCAYAAABkW7XSAAAEb0lEQVR4Xu3UsQ3AQAwDsXzt/Ud1nZRZ4Q+gJxAoQ2d335k5jyNAgMDlAobq8oLEI0DgFzBYvoEAgYyAwcpUJSgBAgbLDxAgkBEwWJmqBCVAwGD5AQIEMgIGK1OVoAQIGCw/QIBARsBgZaoSlAABg+UHCBDICBisTFWCEiBgsPwAAQIZAYOVqUpQAgQMlh8gQCAjYLAyVQlKgIDB8gMECGQEDFamKkEJEDBYfoAAgYyAwcpUJSgBAgbLDxAgkBEwWJmqBCVAwGD5AQIEMgIGK1OVoAQIGCw/QIBARsBgZaoSlAABg+UHCBDICBisTFWCEiBgsPwAAQIZAYOVqUpQAgQMlh8gQCAjYLAyVQlKgIDB8gMECGQEDFamKkEJEDBYfoAAgYyAwcpUJSgBAgbLDxAgkBEwWJmqBCVAwGD5AQIEMgIGK1OVoAQIGCw/QIBARsBgZaoSlAABg+UHCBDICBisTFWCEiBgsPwAAQIZAYOVqUpQAgQMlh8gQCAjYLAyVQlKgIDB8gMECGQEDFamKkEJEDBYfoAAgYyAwcpUJSgBAgbLDxAgkBEwWJmqBCVAwGD5AQIEMgIGK1OVoAQIGCw/QIBARsBgZaoSlAABg+UHCBDICBisTFWCEiBgsPwAAQIZAYOVqUpQAgQMlh8gQCAjYLAyVQlKgIDB8gMECGQEDFamKkEJEDBYfoAAgYyAwcpUJSgBAgbLDxAgkBEwWJmqBCVAwGD5AQIEMgIGK1OVoAQIGCw/QIBARsBgZaoSlAABg+UHCBDICBisTFWCEiBgsPwAAQIZAYOVqUpQAgQMlh8gQCAjYLAyVQlKgIDB8gMECGQEDFamKkEJEDBYfoAAgYyAwcpUJSgBAgbLDxAgkBEwWJmqBCVAwGD5AQIEMgIGK1OVoAQIGCw/QIBARsBgZaoSlAABg+UHCBDICBisTFWCEiBgsPwAAQIZAYOVqUpQAgQMlh8gQCAjYLAyVQlKgIDB8gMECGQEDFamKkEJEDBYfoAAgYyAwcpUJSgBAgbLDxAgkBEwWJmqBCVAwGD5AQIEMgIGK1OVoAQIGCw/QIBARsBgZaoSlAABg+UHCBDICBisTFWCEiBgsPwAAQIZAYOVqUpQAgQMlh8gQCAjYLAyVQlKgIDB8gMECGQEDFamKkEJEDBYfoAAgYyAwcpUJSgBAgbLDxAgkBEwWJmqBCVAwGD5AQIEMgIGK1OVoAQIGCw/QIBARsBgZaoSlAABg+UHCBDICBisTFWCEiBgsPwAAQIZAYOVqUpQAgQMlh8gQCAjYLAyVQlKgIDB8gMECGQEDFamKkEJEDBYfoAAgYyAwcpUJSgBAgbLDxAgkBEwWJmqBCVAwGD5AQIEMgIGK1OVoAQIGCw/QIBARsBgZaoSlAABg+UHCBDICBisTFWCEiBgsPwAAQIZAYOVqUpQAgQMlh8gQCAjYLAyVQlKgIDB8gMECGQEDFamKkEJEDBYfoAAgYyAwcpUJSgBAgbLDxAgkBEwWJmqBCVA4APImgSXLjNx2wAAAABJRU5ErkJggg==

草泥马这么长要死啊!!

那么,这是为什么呢?很简单,因为 canvas 默认宽高是 300×150,不限制的话我们拿到的就是 300×150 尺寸的数据。可以的我的哥。但是,要你何用!

为什么纯色占位图要 1×1 的?因为纯色放大还是纯色。1×1 是这个色儿,10×10 也是这个色儿,100×100 也是这个色儿 。

示例:https://codepen.io/anon/pen/vXKQYq

可以随便转载:冰河博客 » 7 行 JS 代码获取最简短的 base64 格式纯色占位图
分享到: 更多 (0)

评论 抢沙发

评论前必须登录!