JS 在浏览器中预览超长图片最近有个在浏览器中打开图片的需求，但是直接在浏览器中打开会因为图片太高而缩小并自适，所以只能

最近有个在浏览器中打开图片的需求，但是直接在浏览器中打开会因为图片太高而缩小并自适，所以只能特殊处理。

为什么浏览会缩放长图片

浏览器会根据当前窗口或屏幕的大小自动调整图片显示尺寸，确保图片能完整显示在可视区域内。如果图片的长度远远超过屏幕高度，浏览器为了避免页面出现极长的滚动条，会自动缩放图片，使其高度适应屏幕或容器尺寸。

在界面注入带有图片的HTML防止图片缩放

要使图片不缩放，可以新开一个界面，然后将图片以 blob 的方式传入中，这样图片就不会被浏览器缩放，而是从头开始显示。

const previewInNewWindow = () => {
  const imageUrl = 'https://example.com/test.jpg'

  const html = `
  <!DOCTYPE html>
      <html>
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>预览长图片</title>
    <style>
      img {
        width: 100%;
      }
    </style>
  </head>
  <body>
    <img id="previewImage" src="${imageUrl}" />
  </body>
  </html>
  `

  const blob = new Blob([html], { type: 'text/html' })
  const blobUrl = URL.createObjectURL(blob)

  window.open(blobUrl, '_blank')
}

这里需要注意的是，使用了 Blob 对象转化图片得到临时的URL，如果使用类似 base64 的的方法，刷新后就会变成空白，对体验并不友好。