同步发布：https://blog.jijian.link/2020-04-05/canvas-get-color/

由于功能受限，此处不能放 iframe 嵌入链接，如需看到实时效果，请移步 https://blog.jijian.link/2020-04-05/canvas-get-color/

强大的 canvas 可以做很多事，包括手绘，压缩图片，图片滤镜，3D效果等等。

本文仅用 canvas 冰山一角的功能获取坐标点颜色。

源码：

<!DOCTYPE html>

<html>

<head>

  <meta charset="UTF-8">

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <title>canvas 获取图像颜色</title>

  <style>

    body {

      transition: background ease 0.2s;

      text-align: center;

      padding: 0;

      margin: 0;

    }

    #cursor {

      width: 9px;

      height: 9px;

      position: absolute;

    }

    #cursor::before,

    #cursor::after {

      content: '';

      position: absolute;

      background-color: #000;

    }

    #cursor::before {

      left: 4px;

      top: 0;

      width: 1px;

      height: 9px;

    }

    #cursor::after {

      top: 4px;

      left: 0;

      width: 9px;

      height: 1px;

    }

  </style>

</head>

<body>

  <h2>点击图片任意位置</h2>

  <img id="img" src="./1.jpg" alt="">

  <h3 id="output"></h3>

  <script>

    window.addEventListener('load', function () {

      // 将 img 绘制在 canvas 中

      function draw (img) {

        var style = window.getComputedStyle(img);

        var width = parseInt(style.width, 10);

        var height = parseInt(style.height, 10);

        var canvas = document.createElement('canvas');

        canvas.width = width;

        canvas.height = height;

        var ctx = canvas.getContext('2d');

        ctx.drawImage(img, 0, 0);

        // 获取坐标颜色

        function getPixelColor (x, y) {

          var imageData = ctx.getImageData(x, y, 1, 1);

          var pixel = imageData.data;

          var r = pixel[0];

          var g = pixel[1];

          var b = pixel[2];

          var a = pixel[3] / 255;

          a = Math.round(a * 100) / 100;

          var rHex = r.toString(16);

          r < 16 && (rHex = "0" + rHex);

          var gHex = g.toString(16);

          g < 16 && (gHex = "0" + gHex);

          var bHex = b.toString(16);

          b < 16 && (bHex = "0" + bHex);

          var rgbaColor = "rgba(" + r + "," + g + "," + b + "," + a + ")";

          var rgbColor = "rgb(" + r + "," + g + "," + b + ")";

          var hexColor = "#" + rHex + gHex + bHex;

          return {

            rgba: rgbaColor,

            rgb: rgbColor,

            hex: hexColor,

            r: r,

            g: g,

            b: b,

            a: a

          };

        }

        return {

          getColor: getPixelColor,

        };

      };

      // 点击位置绘制一个十字坐标

      function setCursor (x, y) {

        // <div id="cursor" class="cursor"></div>

        var cursor = document.getElementById('cursor');

        if (!cursor) {

          cursor = document.createElement('div');

          cursor.id = 'cursor';

          document.body.appendChild(cursor);

        }

        cursor.style.left = x - 4 + 'px';

        cursor.style.top = y - 4 + 'px';

      }

      var img = document.getElementById('img');

      var output = document.getElementById('output');

      var canvas = draw(img);

      img.addEventListener('click', function (e) {

        var x = e.offsetX;

        var y = e.offsetY;

        setCursor(e.pageX, e.pageY);

        var color = (canvas.getColor(x, y)).rgba;

        document.body.style.background = color;

        output.innerHTML = '坐标点颜色：' + color;

      });

    });

  </script>

</body>

</html>

核心代码为 getPixelColor 方法，该方法通过 canvas 的 context 获取坐标点数据，将数据转换为 rgba 值即可。

兼容性

主要运用 canvas ，所以如果浏览器不支持 canvas，则该方法无效。比如 IE8 就不支持。

canvas 获取图片中某个坐标的颜色的更多相关文章

  1. c# C#获取屏幕鼠标坐标点颜色

    [DllImport("user32.dll")] private static extern IntPtr GetDC(IntPtr hwnd); [DllImport(&quo ...

  2. C#获取屏幕鼠标坐标点颜色

    [DllImport("user32.dll")]        private static extern IntPtr GetDC(IntPtr hwnd);          ...

  3. canvas上画出坐标集合，并标记新坐标，背景支持放大缩小拖动功能

    写在前面:项目需求,用户上传一个区位的平面图片,用户可以在图片上添加新的相机位置,并且展示之前已绑定的相机坐标位置,图片支持放大缩小&拖动的功能.新增坐标,页面展示相对canvas定位,保存时 ...

  4. C# for AUTOCAD ActiveX获取图形对象坐标程序

    C# for AUTOCAD ActiveX获取图形对象坐标程序 using System;using System.Collections.Generic;using System.Componen ...

  5. jquery获取当前元素坐标

    1. jquery获取当前元素坐标 A) 获取对象

  6. js canvas获取图片base64 dataUrl

    function getImgBase64(path, callback) { var img = new Image(); img.src = path; //图片加载完成后触发 img.onloa ...

  7. canvas获取鼠标位置

    canvas获取鼠标位置 <!DOCTYPE html> <html lang="en"> <head> <meta charset=&q ...

  8. 实战项目——获取图片中的GPS位置信息和拍摄时间

    今天突然看到有人写过获取图片中位置信息的程序.我觉得很有趣,也就自己实践了一下,研究了一下 话不多说,先上代码 #!/usr/bin/env python3 # -*- coding: utf-8 - ...

  9. JavaScript 基于HTML5 canvas 获取文本占用的像素宽度

    基于HTML5 canvas 获取文本占用的像素宽度   by:授客 QQ:1033553122 直接上代码   // 获取单行文本的像素宽度 getTextPixelWith(text, fontS ...

  10. 如何使用Processing获取图片中每一个像素的坐标

    剛好碰到有同學問如何在Processing中進行像素級的圖片處理, =============================================================此時需要一 ...

随机推荐

  1. [springboot] mvn编译实现代码混淆

    pom配置   <project>   <build>   <plugins>   <plugin>   <groupId>org.spri ...

  2. python_Django---基础

    1.创建app 终端:python3.x manage.py startapp  app(名字) 2.路由创建 urls.py: 导入函数:from app(app名) import views 创建 ...

  3. Qt通用方法及类库2

    函数名 //初始化数据库 static void initDb(const QString &dbName); //初始化文件,不存在则拷贝 static void initFile(cons ...

  4. vue3 路由-导航守卫

    假设用户登录,在地址栏输入了Login,人性化的设计应该自动回到home页面.或者用户输入不存在路由,也应该回到home页面. 这个时候需要用到vue-router的导航守卫功能. 在我们封装的rou ...

  5. WebClient 用法小结

    进来的项目中要实现能够在windows service中调用指定项目的链接页面.由于访问页面时候使用的是ie浏览器或其他浏览器,所以想起用webclient类. 如果只想从特定的URI请求文件,则使用 ...

  6. IM跨平台技术学习(八)：新QQ桌面版为何选择Electron作为跨端框架

    本文由QQ技术团队王辉.吴浩.陈俊文分享,编辑Tina整理,本文收录时有内容修订和排版优化. 1.引言 在瞬息万变的互联网行业中,年过二十四的即时通讯IM应用 QQ 堪称超长寿的产品,见证了中国互联网 ...

  7. 阿里IM技术分享(四)：闲鱼亿级IM消息系统的可靠投递优化实践

    本文由阿里闲鱼技术团队景松分享,原题"到达率99.9%:闲鱼消息在高速上换引擎(集大成)",有修订和改动,感谢作者的分享. 1.引言 在2020年年初的时候接手了闲鱼的IM即时消息 ...

  8. Android基础入门教程-参考资料

    2)看视频 网上关于Android的视频教程有很多,这里分享下基神力荐的黑马教程吧: 黑马28期Android全套视频无加密完整版:密码:h7jz 52期不加密版:密码:zve8 当然下面这些视频学习 ...

  9. 高性能队列Disruptor

    背景 Disruptor是英国外汇交易公司LMAX开发的一个高性能队列,研发的初衷是解决内存队列的延迟问题(在性能测试中发现竟然与I/O操作处于同样的数量级).基于Disruptor开发的系统单线程能 ...

  10. SQL只取日期的年月日部分

    方法一: select CONVERT(varchar, getdate(), 120 ) 2004-09-12 11:06:08 select replace(replace(replace(CON ...