2019年Web开发中值得关注的新特性(2/4)

上期分享了4个2019值得关注的新特性，今天继续分享4个：图片纵横比、Blob reading、图片剪贴版、Sharing

图片纵横比

这个现象可能比较常见，在图片加载的时候，页面没有为图片预留空间，所以在图片加载完成时，页面结构发生了变化，体验不是很友好。

其实这种情况可以通过增加包裹容器，并设置相关属性来避免。

示例：（可以尝试在Edge和Chrome浏览器下查看差异，建议设置弱网环境）

See the Pen by (@justforuse) on CodePen.

Blob reading

读取文件内容也有新方法了，其实算是比较低频的交互，目前通用的写法是使用FileReader方法，个人感觉有点啰嗦。。

const blob = input.files[0]

const reader = new FileReader()
reader.readAsText(blob)
reader.onload = () => {
  console.log(reader.result)
}

现在可以借助Response提供的方法来实现：

const blob = input.files[0]

const result = await new Response(blob).text();
// 或者更干脆点
const result = await blob.text()

复制图片

这个特性比较新，没有看出啥效果。。先贴着代码吧

async function handleClick() {
  try {
    const imgUrl = `https://user-images.githubusercontent.com/11868477/
    71448279-e501a000-2774-11ea-8456-ddc4d2ced50f.png`

    const response = await fetch(imgUrl, {
      mode: 'no-cors'
    })
    const blob = await response.blob()
    await navigator.clipboard.write([
      new ClipboardItem({ [blob.type]: blob })
    ])
    console.log('image copied!')
  } catch (err) {
    console.log('Failed!', err)
  }
}

write方法支持性很差，有几个其他剪贴版的方法可以使用了，比如读写文本。更多使用方式可以参考这篇文章： https://alligator.io/js/async-clipboard-api/

Share API推出有一段时间了，这里的Sharing指的是分享文件，可以在PWA和Native应用互相分享文件。比如分享一张图片到美图APP中。

既然是和PWA相关，那么就需要在manifest.json文件中做一些配置，（先放个图吧，这个功能咱也没实际使用过）