首页
学习
活动
专区
圈层
工具
发布

通过JS检测当前设备类型

背景: 基友做了个APP,发了一排二维码,然后互相吐槽了一下,发现移动应用出现也一年了,虽然很简单,但是好像都懒得通过写个JS来判断然后发一个二维码让大家下载应用。...简介: 提供了几个JS接口,通过这几个JS接口,可以轻松获取到当前打开页面的浏览器类型,然后根据类型跳转到对应的链接。同时也提供了两个demo方便大家参考。...详细的跳转代码参见目录下download.html 对应链接:http://microdemo.bihe0832.com/MultiQrcode/Demo2/download.html Tools: Tools提供了获取是否是移动设备...提供接口: ZixieJS.browser.isPc 功能:判断平台是不是PC 参数:无 返回值:是否为PC设备 ZixieJS.browser.getDevices 功能:判断设备类型 参数:无 返回值...:核心代码 — tools.html:JS调用的整体事例。

2.5K90

​python之筛选图像中是否存在黑白背景

python之筛选图像中是否存在黑白背景 紧接上篇文章的需求,需要进行功能增加 某些图片存在背景丢失问题,出现黑白背景现象,这种需要排查,同样交给了自动化处理。...这次不比上次了,我搜罗了一堆资料,全是什么人工智能领域的图像识别,AI识别之类的,没有能够符合我需求的,看来CV大法这次是失策了。 那如何找到突破口?...,将这个值和纯黑或纯白像素点的值进行差值计算, 另外一张图片也是如此, 最后将这两张图片的所有点进行挨个计算,最后算出均值,从而判断两张图片是否相似。...第一,我是要找黑白背景,而他们都是由哈希值来求取,黑白在两个极值点,我无法准确判断是否为黑或者白; 第二,我使用cal_ccoeff_confidence方法求出来的值直接是负数,转手使用cal_rgb_confidence...(通过多次实验数据分析得出的谨代表个人观点的结论)。 如果想要判断背景是红色、绿色之类的,可以自己去查找颜色范围,将取值范围和相关算法匹配写到代码里面就行了。

1.3K20
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    Fabric.js 将本地图像上传到画布背景

    ---- 本文介绍 我使用 Fabric.js 的版本是 4.6.0。 这次要实现的效果是:在本地上传一张图片,然后渲染到 canvas 里(当做背景图)。...需求: 通过点击上传按钮上传图片 拿到图片,放到画布上渲染 需要注意的是,本文主要实现 上传图片并渲染到画布 的逻辑,所以没有做上传文件类型的限制,也没做文件大小限制。...-- 引入fabric.js --> js/460/fabric.js">...这样其实不是很好,如果在别的电脑想通过 反序列化 渲染出来的时候,可能会出现一点问题。 如果纯前端实现的方式,可以将图片转成 base64 再生成背景图。...在正式项目中,你可能还要考虑到背景图的大小和画布大小不匹配问题。 你可以参考 《Fabric.js 从入门到膨胀》 中 “拉伸背景图” 这小节。

    3.1K30

    通过 JS 判断页面是否有滚动条的简单方法

    前言 最近在写插件的过程中,需要使用 JS 判断是否有滚动条,搜了一下,大致方法都差不多,但都有些啰嗦,代码不够简洁。最终通过参考不同方法,写了一个比较简单的方法。...在判断滚动条的同时也需要计算滚动条的宽度,通过本篇文章一并与大家分享。 为什么要判断滚动条 ?...为了增强用户体验,通过判断是否有滚动条而添加 margin-left 属性以抵消 overflow: hidden 之后的滚动条位置。...判断是否有滚动条的方法 其实只需要一行 JS 就可以,测试兼容 IE7 function hasScrollbar() { return document.body.scrollHeight >...scrollDiv.clientWidth; document.body.removeChild(scrollDiv); return scrollbarWidth; } 总结 使用 JS

    8.8K90

    WPF 通过 GetMessageExtraInfo 方法获取当前收到的鼠标消息是否由触摸转换过来

    本文将告诉大家如何在 WPF 或者其他 Win32 应用里面,在收到鼠标消息时,通过 GetMessageExtraInfo 方法获取当前收到的鼠标消息是否由触摸消息提升而来 大家都知道,在不开启 WM_Pointer...WM_Touch 或者是 RealTimeStylus 等方式,默认下触摸都会提升为鼠标消息从而更好兼容应用程序的逻辑 如果此时应用程序想要根据消息循环里面接收到的 Win32 消息判断一个鼠标消息的来源是否来自于触摸框触摸屏或者是...Pen 笔等,可以通过 GetMessageExtraInfo 方法获取更多的信息 根据 GetMessageExtraInfo 方法获取到的 LPARAM 进行 Mask 一下 0xFFFFFF80...值,即可通过返回的结果判断鼠标消息的来源,如返回的结果是 0xFF515780 则判断是 Touch 触摸消息过来的,通过返回结果是 0xFF515700 则判断是 Pen 笔过来的 演示的代码如下...0) { // 这是鼠标 } } return IntPtr.Zero; } 通过以上代码即可了解当前收到的鼠标消息是否从触摸或笔消息提升的

    31210

    js判断页面是否是通过浏览器后退按钮返回打开的

    分享一个bug的处理方法 # 背景 最近使用uni-app开发项目时遇到了一个bug,需求是需要在两个平台之间切换,A平台登录后要选择身份,选完后带着token进入另外一个平台B的个人空间,点击个人空间顶部的个人信息区域又可以切换到...(用户通过刷新,包括JS调用刷新接口等方式访问页面) 2 : TYPE_BACK_FORWARD Navigation where the history handling behavior is set...(用户通过后退按钮访问本页面) 255 : TYPE_RESERVED Any navigation types not defined by values above....在这些情况下,该type 属性应返回适当的值,例如 TYPE_RELOAD重新加载当前页面或 TYPE_NAVIGATE导航到新URL) redirectCount This attribute must...所以我们只要判断type属性为2时就可以知道页面是通过返回按钮打开的了,然后开头的问题就可以据此加判断来解决token异常了。 ?

    17.6K20

    【Java AWT 图形界面编程】使用鼠标滚轮缩放 Canvas 画布中绘制的背景图像 ( 绘制超大图像 + 鼠标拖动 + 鼠标滚轮缩放 + 以当前鼠标指针位置为缩放中心 示例 )

    一、鼠标滚轮缩放的中心点设置为当前鼠标中心点 - 要点分析 ---- 鼠标指针指向界面中的 Canvas 画布某个位置 , Canvas 画布中绘制着一张超大图片 , 以该位置为中心 , 滑动鼠标滚轮时进行缩放...; 使用鼠标滚轮缩放后 , 在 Canvas 中绘制的图片的尺寸肯定是放大或者缩小了 , 尺寸发生了改变 ; 图片缩放时 , 鼠标指针指向一个位置 , 该位置对应着一个当前 Canvas 画布中的 x..., 需要进行下面两个步骤的操作 : 保存当前鼠标指针指向的位置 , 以及鼠标指针指向位置对应图片中坐标位置的比例 ; 鼠标指针指向的位置不变 , 指向图片坐标比例不变 , 图片尺寸发生了改变 , 重新计算当前图片的放置位置...; 在鼠标滚轮事件 MouseWheelEvent 中 , 可以直接通过调用 e.getX(), e.getY() 获取到当前 鼠标指针 在 Canvas 画布的坐标 ; 根据该 Canvas 中的坐标...H 标识放置在界面中心 ; 将鼠标指针放在 H 位置 , 缩放 , 发现此时缩放 , 就是以当前鼠标指针为中心进行的缩放 ;

    3.3K10

    分享10个超实用的高级 CSS 技巧

    h1元素添加到下面的div中,CSS自动在每个h1标签前面添加数字,无需开发人员手动输入或使用JS。...两个图层的颜色通过乘以它们的值来混合,从而产生更暗且更混合的外观。当从彩色图像中删除白色背景时,这非常有用,因为白色部分变得透明,显示下面的背景。虽然这会使图像有点暗。...它通过将元素的颜色与其背景混合来应用变暗效果。此方法增强较暗区域,产生烧焦或阴影的外观。...如果我们将 box-shadow 属性添加到具有透明背景的 PNG 图像,它仍然会在图像周围显示一个背景,显示出方形外观。...使用CSS的动态对比 你可以通过在视觉上将文本或设计的特定部分与背景区分开来动态地使文本或设计的特定部分脱颖而出,如下图所示。 你可以看到文本在两个不同的部分有两种不同的颜色,具体取决于背景颜色。

    43510

    【CSS】1965- 分享10个超实用的高级 CSS 技巧

    h1元素添加到下面的div中,CSS自动在每个h1标签前面添加数字,无需开发人员手动输入或使用JS。...两个图层的颜色通过乘以它们的值来混合,从而产生更暗且更混合的外观。当从彩色图像中删除白色背景时,这非常有用,因为白色部分变得透明,显示下面的背景。虽然这会使图像有点暗。...它通过将元素的颜色与其背景混合来应用变暗效果。此方法增强较暗区域,产生烧焦或阴影的外观。...如果我们将 box-shadow 属性添加到具有透明背景的 PNG 图像,它仍然会在图像周围显示一个背景,显示出方形外观。...使用CSS的动态对比 你可以通过在视觉上将文本或设计的特定部分与背景区分开来动态地使文本或设计的特定部分脱颖而出,如下图所示。 你可以看到文本在两个不同的部分有两种不同的颜色,具体取决于背景颜色。

    48010

    PhotoSwipe中文API(二)

    您可以通过添加选项showHideOpacity做到这一点:真(尝试将其添加到上面CodePen来测试它的外观)。...showHideOpacity boolean false 如果设置为false:背景透明度和图像规模将动画(图像透明度始终为1)。...PhotoSwipe被打开后PSWP - 公开课将被添加到根元素,你可以用它在CSS中使用不同的过渡时间。 bgOpacity number 1 背景(.pswp_bg)透明度。...此样式是通过JS限定,而不是通过CSS,因为此值用于一些基于姿势的过渡。 spacing number 0.12 幻灯片之间的间距比。例如,0.12将呈现为滑动视口宽度的12%(四舍五入)。...应该是两个整数数组,第一个 - 当前图像之前预加载的项目数,第二个 - 当前图像之后。 例如。如果你把它设置为[1,3],它会之前,在当前负载1的图像,目前后3图像。值不能小于1。

    2.7K20

    【Java AWT 图形界面编程】使用小键盘按键缩放 Canvas 画布中绘制的背景图像 ( 键盘按键监听 + 绘制超大图像 + 鼠标拖动 + 鼠标滚轮缩放 + 以当前鼠标指针位置为缩放中心 示例 )

    + 鼠标拖动 + 鼠标滚轮缩放 + 以当前鼠标指针位置为缩放中心 示例 ---- 在 【Java AWT 图形界面编程】Canvas 中绘制超大图片 ( 使用鼠标拖动查看全图 | 设置 JFrame...但是使用鼠标拖动时 , 拖动的效果也随之缩放, 如 缩小画布后 , 移动鼠标 , 移动距离对应的缩放效果也随之缩小 ; 在 【Java AWT 图形界面编程】使用鼠标滚轮放大缩小 Canvas 画布中绘制的背景图像...( 鼠标滚轮事件监听器 MouseWheelListener | Canvas 中绘制图像并设置图像大小 ) 博客中 , 使用缩放背景图像的方式 , 实现缩放效果 , 并同时福袋鼠标指针拖拽效果 ;...本博客中实现的案例 , 在上面的基础上 , 添加了鼠标滚轮缩放的中心点设置为当前鼠标中心点 ; 1、代码示例 import javax.swing.*; import java.awt.*; import...class LargeCanvas extends JPanel { // 鼠标按下时的坐标 以及 更新后的坐标 private int startX, startY; // 当前的位置偏移

    2.2K20

    网站图片优化

    图像压缩 JPEG/JPG PNG (PNG-8 与 PNG-24) WebP 图像压缩 1.使用 imagemin cd进入项目根目录 npm install imagemin 2.创建一个名为 imagemin.js...压缩 jpeg 1.npm install imagemin-mozjpeg 2.以下内容添加到 imagemin.js 中 const imageminMozjpeg = require('imagemin-mozjpeg...使用 pngquant 优化 PNG 图像 1.npm install imagemin-pngquant 2.以下内容添加到 imagemin.js 中 const imageminPngquant...通过以无损和有损格式编码图像来提供更小的文件大小,使其成为 JPEG 和 PNG 的一个很好的替代方案 清晰度通常可以与 JPEG 和 PNG相提并论,而且文件大小要小得多 浏览器对 WebP 支持并不普遍...优化webp图像 1.npm install imagemin-webp 2.以下内容添加到 imagemin.js 中 const imageminWebp = require('imagemin-webp

    1.8K30

    HTML-CSS基础学习

    :foces 将样式添加到被选中的元素 :hover 当鼠标悬浮这元素上方时,向元素添加样式 :link 将样式添加到未访问的元素 :visited 将样式添加到已被访问过的元素 :first-child...将样式添加到元素的第一个子元素 :lang 设置元素使用特殊语言的内容的样式 p标签: p:empty 选择没有子元素的每个p元素 p:ratget 选择当前活动的p元素 :not(p)...background-color 背景颜色 background-image 背景图像 background-repeat 背景图像如何铺排填充 background-attachment 背景图像随着对象内容滚动或者固定...background-position 背景图像位置 background-origin 背景图像显示的原点 background-clip 背景向外剪裁的区域 background-size...背景图像的尺寸大小 background 复合属性 边框属性 边框颜色 border-top-color 上边框颜色 border-right-color 右边框颜色 border-bottom-color

    5.3K30

    针对CSS说一说|技术点评

    :focus,将样式添加到被选中的元素中 :hover,当光标悬浮在页面对象上方时,向页面对象添加样式 :link,将样式添加到未被访问过的链接中 :visited,将样式添加到被访问过的链接中 :first-child...3.百分比%,以当前文本的百分比定义的尺寸。...修饰页面文本和页面背景的属性 background,将背景属性设置在一个声明中 background-color,设置页面对象的背景颜色 background-image,引用图像,将其设置为背景 background-repeat...,设置背景图像重复的方式 background-position,设置背景图像的具体位置 background-attachment,设置背景图像是固定还是随着页面的其余部分滚动 color,设置文本颜色...text-overflow: ellipsis; width: 200px; 设置宽度,将溢出内容设为隐藏,强制文本单行显示,设置溢出文本显示为省略标记 边界换行属性:word-wrap,用于设置或索引当前行超过指定容器的边界时是否断开转行

    1.3K20

    Cocos Creator 制作第一个游戏

    设置场景图像 添加背景 首先在 资源管理器 里按照assets/textures/background的路径找到我们的背景图像资源,点击并拖拽这个资源到 层级编辑器 中的Canvas节点上,直到Canvas...我们在对场景进行编辑修改时,可以通过主菜单文件->保存场景来及时保存我们的修改。也可以使用快捷键Ctrl+S(Windows)或Cmd + S(Mac)来保存。 修改背景尺寸 ?...在 场景编辑器 中,可以看到我们刚刚添加的背景图像,下面我们将修改背景图像的尺寸,来让他覆盖整个屏幕。 首先选中background节点,然后点击主窗口左上角工具栏第四个 矩形变换工具: ?...现在我们可以把 Player 组件添加到主角节点上。...: // Player.js update: function (dt) { // 根据当前加速度方向每帧更新速度 if (this.accLeft) {

    2.1K44
    领券