有时候为了网站速度,我们不希望有些不必要的图片提前加载,于是使用占位图代替。占位图片可以是纯色的,也可以是个性化的。占位图有很多种选择,大家可以查阅小影的这篇文章 ☞ 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 默认宽高是 300x150,不限制的话我们拿到的就是 300x150 尺寸的数据。可以的我的哥。但是,要你何用!

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

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

好了我就写到这。

最后祝大家中秋快乐(虽然晚了好几天)!

扩展阅读:

https://c7sky.com/the-top-10-image-placeholder-services.html
https://codepen.io/anon/pen/vXKQYq
https://developer.mozilla.org/zh-CN/docs/Web/API/Canvas_API

带符号 * 的表示必填项
  1. leejon
    leejon

    那 data:application/JavaScript;base64 这种是啥?

    回复
  2. 东子
    东子

    回复
  3. zzz
    zzz

    get

    回复
    1. MaiCong
      MaiCong博主

      (ˇˍˇ)

      回复
  4. 那时年少
    那时年少

    。.avi

    回复
    1. MaiCong
      MaiCong博主

      污妖王

      回复
  5. 极雪
    极雪

    啪啪啪

    回复
    1. MaiCong
      MaiCong博主

      么么哒

      回复
  6. 摩天之星
    摩天之星

    酱紫

    回复
    1. MaiCong
      MaiCong博主

      soga

      回复
  7. 卢松松博客
    卢松松博客

    从百度点进来的,支持一下,希望站长您多出一些好文章。

    回复
    1. MaiCong
      MaiCong博主

      好哒~ 不过刚开始看到卢松松大名确实吓了我一跳。

      回复
  8. 神父
    神父

    卖葱把你的主题交出来

    回复
    1. MaiCong
      MaiCong博主

      这个主题我更改了核心文件的,就算放出来也不好弄啊。

      回复
  9. nyun
    nyun

    不懂这是啥,我可不可以这样理解,就是任何一张图片都可以转换为base64,然后加载速度就会提高,也就是说像博客中的一些固定的背景图或小图标可以用base64格式来替代?

    回复
    1. MaiCong
      MaiCong博主

      是的哦,可以这样说。

      回复
  10. Maro
    Maro

    最近被一个前端搞死了 一个data图片占了整个页面代码的一半 每次让我拉上拉下的搞

    回复
    1. MaiCong
      MaiCong博主

      打死他!

      回复