opencv全屏显示图像_切换到高分辨率图像以在Web上全屏显示

opencv全屏显示图像

Integrating Retina image versions onto web pages is optional in most cases… but when images go fullscreen on desktop, there are no alternatives but to switch to a HiDPI version, for several reasons:

在大多数情况下，将Retina图像版本集成到网页是可选的……但是，当图像在桌面上全屏显示时，除了切换到HiDPI版本之外，别无选择，原因有以下几种：

• Thumbnail images will look awful when expanded to fullscreen size, demanding a solution.
  缩略图图像扩展到全屏尺寸时看起来很糟糕，需要解决方案。
• In most cases fullscreen mode will be used to display just a few images, allowing us to concentrate on edge cases rather than trying to code a solution for every image.
  在大多数情况下，全屏模式将仅用于显示少量图像，这使我们能够专注于边缘情况，而不是尝试为每个图像编写解决方案。
• Fullscreen mode must be engaged by the user, allowing plenty of opportunity to preload images before user interaction.
  用户必须启用全屏模式，从而在用户交互之前有足够的机会预加载图像。

• Fullscreen mode is not yet supported on mobile devices, so we don’t have to worry about crushing bandwidth.

  目前尚不支持在移动设备上全屏模式，所以我们不必对破碎带宽担心。

The best current approach uses a combination of srcset and and the Fullscreen API:

当前最好的方法是结合使用srcset和Fullscreen API ：

HTML (The HTML)

<figure id="lake">
	<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/lake-small.jpg" srcset="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/lake-small.jpg 1600w, https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/lake-large.jpg 2400w" alt="Photograph of Lake Louise, British Columbia">
	<figcaption>Fullscreen API with srcset Image Replacement 	<button>Click</button> to present content in fullscreen mode. Press <kbd>ESC</kbd> to cancel.
	</figcaption>
</figure>

The use of srcset's w syntax ensures that the SD version of the image is presented if the viewport is 1600 device pixels wide or less.

srcset的w语法的使用可确保在视口宽度为1600或小于1600设备像素时显示图像的SD版本。

CSS (The CSS)

The image is centered in fullscreen mode using flexbox; the <figcaption> is hidden in the same. Note that the :fullscreen is written using the final spec, with vendor prefixes on separate lines, as combining them in group selectors will sometimes fail in certain browsers:

使用flexbox在全屏模式下将图像居中； <figcaption>隐藏在同一位置。 请注意:fullscreen是使用最终规范编写的，供应商前缀位于单独的行中，因为在某些浏览器中将它们组合到组选择器中有时会失败：

#lake {
	position: relative;
	font-size: 0;
}
:-moz-full-screen figcaption {
	opacity: 0;
}
:-webkit-full-screen figcaption {
	opacity: 0;
}
:full-screen #figcaption {
	opacity: 0;
}
#lake figcaption {
	background: rgba(255,255,255,0.75); 
	position: absolute; bottom: 0;
	margin: 0; width: 100%;
	padding: 1rem;
	font-size: 1.3rem;
	transition: 1s;
}
#lake img {
	width: 100%;
	height: auto;
}
:-moz-full-screen img {
	width: 100%;
}
:-webkit-full-screen {
	width: 100%;
}
:-moz-fullscreen {
	display: flex;
	align-items: center;
	justify-content: center;
}
:-ms-fullscreen {
	display: flex;
	align-items: center;
	justify-content: center;
}
:fullscreen {
	display: flex;
	align-items: center;
	justify-content: center;
}

The button requests fullscreen display via JavaScript:

该按钮要求通过JavaScript全屏显示：

function launchFullscreen(element) {
	if (element.requestFullScreen) {
element.requestFullscreen();
	} else if (element.mozRequestFullScreen) {
element.mozRequestFullScreen();
	} else if (element.webkitRequestFullscreen) {
element.webkitRequestFullscreen();
	} else if (element.msRequestFullscreen) {
element.msRequestFullscreen();
	}
}
var lake = document.getElementById("lake"),
fullbutton = lake.getElementsByTagName("button")[0];
fullbutton.onclick = function() {
	launchFullscreen(lake);
}

Note that you will need to use the picturefill polyfill for browsers that currently lack support for the srcset attribute.

请注意，您需要使用picturefill填充工具用于目前缺乏支持的浏览器srcset属性。

翻译自: https://thenewcode.com/713/Switching-To-High-Resolution-Images-For-Fullscreen-Display-On-The-Web

opencv全屏显示图像