V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
danube533
V2EX  ›  jQuery

jQuery 有没办法取到页面上某一像素点的颜色值?

  •  
  •   danube533 · 2015-07-01 10:34:24 +08:00 · 5643 次点击
    这是一个创建于 3420 天前的主题,其中的信息可能已经有所发展或是发生改变。

    jQuery有没办法取到页面上某一像素点的颜色值?

    21 条回复    2015-07-01 19:22:04 +08:00
    coolzjy
        1
    coolzjy  
       2015-07-01 10:43:36 +08:00   ❤️ 1
    DOM 里面没这种 api
    jQuery 也没办法
    leojoy710
        2
    leojoy710  
       2015-07-01 10:48:04 +08:00
    dom先转成canvas
    然后就能获取颜色了
    不过可能dom->canvas这一步会有位置的差异
    Navee
        3
    Navee  
       2015-07-01 11:06:19 +08:00
    没有
    zythum
        4
    zythum  
       2015-07-01 11:29:34 +08:00
    理论上可以可以。但是比较繁琐。并且逻辑分支非常复杂,还有很多不确定因素。不建议这样搞。你可以换个思路试试。
    bertonzh
        5
    bertonzh  
       2015-07-01 11:37:59 +08:00
    不可行。
    单单获取图片像素点这一条,在跨域问题面前就会被毙掉。
    learnshare
        6
    learnshare  
       2015-07-01 11:41:22 +08:00
    跟 jQuery 没关系

    @leojoy710 这个方案是可行的,不过可能会有诸多问题。不过没尝试怎么知道
    otakustay
        8
    otakustay  
       2015-07-01 11:52:44 +08:00
    特定情况下理论上可以+1,比如整个页面没有跨域资源的话,可以canvas画出来再取点
    还请把提这种蛋疼需求的PM砍了
    jugelizi
        9
    jugelizi  
       2015-07-01 11:55:57 +08:00
    显然这个问题就有bug 弹出层背景色怎么算
    guesskiss
        10
    guesskiss  
       2015-07-01 12:29:06 +08:00 via Android
    js截屏,再解析该图片像素点
    crs0910
        11
    crs0910  
       2015-07-01 13:32:30 +08:00
    crs0910
        12
    crs0910  
       2015-07-01 13:35:32 +08:00
    就是2楼的方法,先算鼠标点的哪个元素,然后算鼠标在元素里面的位置,然后把元素转 canvas ,最后取出 canvas 里面刚刚算的那个坐标的颜色。
    crs0910
        13
    crs0910  
       2015-07-01 13:45:07 +08:00
    跨域解决看看引入的那个 html2canvas.js 的文档,有解决方法。
    zonghua
        14
    zonghua  
       2015-07-01 13:51:35 +08:00 via iPhone
    @otakustay 在线photoshop工具,你怕不怕
    otakustay
        15
    otakustay  
       2015-07-01 14:05:35 +08:00
    @zonghua 这种工具整个页就是个canvas,所以正常人都不会有楼主的问题的哈哈哈
    justahappy
        16
    justahappy  
       2015-07-01 14:08:11 +08:00
    @zythum 理论上可以可以。但是比较繁琐。并且逻辑分支非常复杂,还有很多不确定因素。不建议这样搞。你可以换个思路试试。 多完美的万能回复,假装自己很懂的样子。。。。。。
    crs0910
        17
    crs0910  
       2015-07-01 14:26:20 +08:00
    @justahappy 有可能是你自己看不懂而已。朱一可能是说获取元素 style 里面有可能涉及到颜色变化的属性值这个思路,因为题主说的是 jquery ,一般思路就是获取元素然后检查 background-color 之类属性,但是这个思路太复杂了,朱一才那么说。
    这是我的理解。不喜勿喷。
    zythum
        18
    zythum  
       2015-07-01 15:20:38 +08:00
    @crs0910
    @justahappy

    确实是这样子的。
    逻辑大概是找到那个位置有哪些dom叠着。然后通过这个dom的style分析位置是content还是border还是其他什么部分。把透明的滤掉。然后取颜色分析结构是个样式定义的颜色还是backgroundImage或者就是一个image。如果是样式颜色好办,如果图片那么分析图片的设置。把图片下载下来。找到那个点的位置。canvas api有这个。这个操作和用html2canvas是一样的。但是这个操作很难把所有的逻辑都包括进去。特别是一些css3属性什么transform变形什么的。html2canvas一样也是会有问题的。

    不确定因素就是如果这个位置不是一个常规dom就不行了。比如embed,object. 中间嵌入flash什么的比如那是个video标签在播放内容什么的。

    不知道题主的运用场景时什么。如果可以的话试试用firefox插件开发。firefox插件貌似有domToCanvas的api,具体是哪个忘了。但是朱一记得有。
    bertonzh
        19
    bertonzh  
       2015-07-01 16:52:29 +08:00
    @zythum
    Chrome 扩展有获取页面区域像素的 API,Firefox 可能也有,如果真用扩展/插件来写就很简单了。

    @crs0910 html2canvas 我研究过,处理跨域是在自己的服务器放一个代理,静态资源全都经过代理走,这样就能解决跨域问题,拿到需要解析的文档和相关资源了。
    但是既然都这样做了,直接拿 phantomjs 截图不就好了?
    zythum
        20
    zythum  
       2015-07-01 17:56:03 +08:00
    @bertonzh 主要是要知道题主的运用场景...
    bertonzh
        21
    bertonzh  
       2015-07-01 19:22:04 +08:00
    @zythum 对!
    很多莫名其妙的需求,知道运用场景之后,就会有更好的解决方式。
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   1215 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 25ms · UTC 23:38 · PVG 07:38 · LAX 15:38 · JFK 18:38
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.