2023-9月总结

持续更新...

学习收获(干货总结)

学习总结，避免无效(低效)学习。

1. 《产品：请给我实现一个在web端截屏的功能！》

   dom-to-image库比html2canvas库体积小很多。

   实现原理：<img>标签可以渲染svg，<svg>标签可以嵌套<foreignObject>标签，<foreignObject>标签可以放xml/html序列化内容。

   xml序列化：

   var s = new XMLSerializer();
   var d = document;
   var str = s.serializeToString(d);
   

   使用canvas，drawImage()将图片绘制到canvas，使用toDataURL()将图片数据保存。

function dom2image(dom, type) {
  // 获取dom的宽高
  const { width, height } = dom.getBoundingClientRect();
  // 为需要转成图片的dom添加xmlns属性
  dom.setAttribute('xmlns', 'http://www.w3.org/1999/xhtml');
  const img = new Image();
  const serializer = new XMLSerializer();
  img.src = `data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="${width}" height="${height}"><foreignObject x="0" y="0" width="100%" height="100%">${serializer.serializeToString(dom).replace(/#/g, '%23').replace(/\n/g, '%0A')}</foreignObject></svg>`;
  const canvas = document.createElement('canvas');
  canvas.setAttribute('width', width);
  canvas.setAttribute('height', height);
  const ctx = canvas.getContext('2d');
  ctx.drawImage(img, 0, 0, width, height);
  return canvas.toDataURL(type || 'image/png');
}
const a = document.createElement('a');
a.href = dom2image(document.documentElement);
a.download="img.png";
a.click();

使用有一些问题，dom节点本身需要包含样式。

2. 在浏览器中检测是否为深色模式

• @media (prefers-color-scheme: dark) 媒体查询，系统是否是深色模式。

body { background: lightblue; }
@media (prefers-color-scheme: dark) {
  body { background: lightgreen; }
}

因为我系统设置的是深色模式，所以网页上body的背景色展示为lightgreen。

可以在控制台，使用cmd+shift+p打开命令工具。输入light或dark来浏览网页的深色或浅色模式(如果网页支持深色和浅色模式的话)。

进入浅色模式后，body的背景色变为lightblue。

• js使用matchMedia()这个方法来检查页面中的媒体查询。

// 字符串左右两段有小括号
window.matchMedia('(prefers-color-scheme:dark)');

返回的是一个MediaQueryList实例。

MediaQueryList是基于EventTarget的，可以添加事件。

const mediaQueryList = window.matchMedia('(prefers-color-scheme:dark)');
mediaQueryList.addEventListener('change', console.log);

在控制台的命令行(cmd+shift+p)修改深浅色模式：