同步发布：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. Qt开发经验小技巧191-195

    关于QList队列的处理中,我们最常用的就是调用append函数添加item,往前插入item很多人第一印象就是调用insert(0,xxx)来插入,其实QList完全提供了往前追加item的函数pr ...

  2. Qt音视频开发39-人脸识别在线版

    一.前言 关于人脸识别这块,前些年不要太火,哪怕是到了今天依然火的一塌糊涂,什么玩意都要跟人脸识别搭个边,这东西应该只是人工智能的一个很小的部分,人脸识别光从字面上理解就是识别出人脸区域,其实背后真正 ...

  3. Pelco-D控制协议

    1. 通令参数: 标准速率为4800bps,无校验,  8位数据位,1位停止位 2.命令串格式: 一个PTZ控制命令为7字节的十六进制代码,格式如下: Word  1 Word2 Word 3 Wor ...

  4. 在Eclipse配置并编译worldwind java2.1.0源码，选中Src目录下gov.nasa.worldwindx.examples包下ApplicationTemplate.java类文件run时提示“javax.xml.parsers.DocumentBuilderFactory.setFeature(Ljava/lang/String;Z)V”异常的解决办法

    问题现象: 在Eclipse配置并编译worldwind java2.1.0源码,选中Src目录下gov.nasa.worldwindx.examples包下ApplicationTemplate.j ...

  5. React 应用的 Nginx 缓存控制

    典型 React 应用面临的缓存问题,可通过 Nginx 配置进行解决 通用部署 构建应用后,只需使用 Nginx 指向静态文件即可 server { listen 80; root /PATH/TO ...

  6. 前端学习openLayers配合vue3（图层中心点的偏移）

    有了上一步的学习,我们知道了如何创建一个地图,现在我们来尝试更改一下图层的中心点 关键代码 let view = map.getView();//获取视图层 let center = view.get ...

  7. 安装Rational rose软件简单教程

    安装Rational rose软件简单教程 一.下载文件 百度云盘下载链接:https://pan.baidu.com/s/1QWmTgxKlQtE5flP7dXIF5w 提取码:wjnq 二.装虚拟 ...

  8. Solution Set -「LOCAL」冲刺省选 Round XXVIII

    \(\mathscr{Summary}\)   A 题显然是图论模型嘛--但是卡得太久了,B 题 C 题都不好骗,裂开 qwq.   感觉时间安排上不尽合理,如果 B C 简单一点我这个就要挂打分了. ...

  9. HBase-1集群安装部署

    1.1 准备安装包 下载安装包并上传到hadoop01服务器 安装包下载地址:https://www.apache.org/dyn/closer.lua/hbase/2.2.6/hbase-2.2.6 ...

  10. c++：-8

    上一节学习了C++的STL库和范型:c++:-7,本节学习c++的输入输出和流类库. I/O流 (1)程序与外界环境的信息交换 当程序与外界环境进行信息交换时,存在着两个对象:程序中的对象.文件对象. ...