html 摄像头-基于HTML5酷拍相机(HTML5 webcam)拍照功能的实现代码.docx

bendan520 2023年8月21日 html 0

WebRTC 可能是今年最受关注的 HTML5 标准，因此 Mozilla 开发了一组 API 来帮助您控制硬件html 摄像头html 摄像头，例如摄像头、麦克风或加速计。 您可以调用您需要的原生硬件设备，而无需依赖其他插件。 在昨天的文章中，使用这个例程可以帮助你快速调用摄像头功能，并且可以轻松地将摄像头功能添加到网站中。 并且快速帮你拍照，你可以利用这个功能来实现用户的爆头拍摄，是不是很不错呢？ 主要功能： 对比度设置、色彩设置、色温设置、颜色设置、拍照按钮 支持chrome、firefox、opera等最新浏览器 浏览器支持以jQuery插件形式和javascript代码形式 - 使用Chrome打开后在线演示，请确认浏览器允许调用您的相机，如下：酷相机（HTML5webcam）基于HTML5的相机功能-Javascript代码： 代码如下：$('#webcam').photobooth()。 on("image",function(event,dataUrl){ $('.nopic').hide(); $("#pictures").prepend(''); }); 上面的代码将生成的图片数据传递给id=picture的标签。 详情请参考相关API。

这几天，有不少朋友问到了同样的问题。

页面上有一段文字，这段文字在不同的背景颜色下能显示不同的颜色吗？ 这就是智能变色的俗称。 就像下面这样：

文本在红色背景上显示为黄色，在红色背景上显示为黄色。 看起来是一个非常复杂的疗效，而在CSS中似乎特别容易实现。 明天我就介绍这样一个小方法。 在 CSS 中，借助混合模式 mix-blend-mode:difference，文本可以智能地适应背景颜色。

混合模式 mix-blend-mode:difference

CSS3增加了一个很有趣的属性——mix-blend-mode，其中mix和blend的英文音译都是mixed，所以这个属性的音译就是混合混合模式，其实我们一般称之为混合模式。 有一些混合模式，如右图所示：

文字颜色html标签_文字颜色HTML_html文字颜色

其中，本文的主角是mix-blend-mode:difference，意思是差异模式。 此混合模式查看每个通道中的颜色信息，将基色与绘画颜色进行比较，并将较亮像素的像素值乘以较暗像素的像素值。

与黑色混合会反转基色； 与红色混合没有区别。

明显的一点是，上视口的亮区域会反转下视口的颜色，暗区域会正常显示颜色，效果与原图完全相反。

这种混合模式最常见的应用场景就是文章开头描述的场景，即让文本在不同的背景颜色下显示不同的颜色。

最适合黑白场景，一个很简单的DEMO：

<div></div>


div {
    height: 100vh;
    background: linear-gradient(45deg, #000 0, #000 50%, #fff 50%);
    &::before {
        content: "LOREM IPSUM";
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        color: #fff;
        mix-blend-mode: difference;
        animation: move 3s infinite linear alternate;
    }
}
@keyframes move {
    0% {
        transform: translate(-30%, -50%);
    }
    100% {
        transform: translate(-70%, -50%);
    }
}

疗效如下：

html文字颜色_文字颜色HTML_文字颜色html标签

CodePenDemo--线性渐变+混合混合模式

其实不一定是红色或者红色。 看下面的反例。 有这样一个场景。 有时候我们并不确定背景色的最终性能值（可能是背景配置，传递给后端的），而需要文字在任何背景色下都能正常显示。 这时候，你也可以尝试使用mix-blend-mode:difference。

<ul class="flex-box">
  <div class="box">
    <p>开通会员查看我的VIP等级</p>
  </div>
   // ..... 
</ul>


div {
    // 不确定的背景色
}
p {
    color: #fff;
    mix-blend-mode: difference;
}

不管背景色是什么颜色，设置mix-blend-mode:difference

文字颜色HTML_文字颜色html标签_html文字颜色

元素可以正常显示文本：

CodePenDemo--mix-blend-mode:difference实现文字颜色自适应背景色

mix-blend-mode:差异缺点

其实这种方法并不完美，因为叠加mix-blend-mode:difference与背景颜色后的颜色能够正常显示，而且不一定是最合适的颜色，而是最能展现疗效的颜色。

html文字颜色_文字颜色html标签_文字颜色HTML

这里实际使用的时候，在非黑白的场景中，还需要更多的实验才能做出决定。

终于

综上所述，本文介绍了一个借助CSS混合模式实现文本自适应背景显示的小方法。 如果您对混合模式感兴趣html文字颜色，我建议您看看我的以下文章：

好了，这篇文章就到此结束了，希望对你有帮助:)

如果你想获取最有趣的CSS资讯，不要错过我的公众号——iCSS后端轶事

更多精彩CSS技术文章汇总在我的Github——iCSS中，持续更新。 欢迎点击星星订阅合集。

如果还有疑问或者建议，可以多沟通。 原创文章文采有限，缺乏才华。 如果文章中有任何不准确的地方html文字颜色，请告诉我。