同步发布：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. Redis反序列化LocalDateTime时报错

    今天在整合redis和spring boot的时候,遇到了一个错误,记录一下. 报错如下: Could not read JSON: Cannot construct instance of `jav ...

  2. 多线程极速导出/9字段10W行只需2秒/导入导出打印组件/功能丰富简单易用

    一.功能特点 组件同时集成了导出数据到csv.xls.pdf和打印数据. 所有操作全部提供静态方法无需new,数据和属性等各种参数设置采用结构体数据,极为方便. 同时支持QTableView.QTab ...

  3. Qt编写安防视频监控系统30-GPS运动轨迹

    一.前言 此功能是一个客户定制的,主要是需要在地图上动态显示GPS的运动轨迹,有个应用场景就是一个带有监控的车子,实时在运动中,后台可以接收到经纬度信息,需要绘制对应的轨迹,相当于这些摄像机点位是动态 ...

  4. 快速上手jquery

    优点 强大的选择器机制 优质的隐私迭代 链式编程 选择机制 选择器 标签名 $('div') id $('#id') class $('.clname') 属性 $('div:[name='66']' ...

  5. 数字世界中的纸张——理解 PDF （转载）

    转载自 https://type.cyhsu.xyz/2018/09/understanding-pdf-the-digitalized-paper/ 引言 PDF 是我们打交道最多的文件格式之一.提 ...

  6. 记一次 contentInsetAdjustmentBehavior 引发的bug

    注:本文同步发布于微信公众号:stringwu的互联网杂谈记一次 contentInsetAdjustmentBehavior 引发的bug 1 背景 项目中使用到了UILable来展示相关的文本内容 ...

  7. Java工具类SignUtil

    import javax.crypto.Mac; import javax.crypto.SecretKey; import javax.crypto.spec.SecretKeySpec; impo ...

  8. CDS标准视图：优先级描述数据 I_GenericPriorityTextData

    视图名称:优先级描述数据 I_GenericPriorityTextData 视图类型:基础视图 视图代码: 点击查看代码 @AbapCatalog.sqlViewName: 'IGENPRIOTEX ...

  9. c# 无法捕获 System.NullReferenceException？

    ..在VS debug 模式下会"无法捕获" System.NullReferenceException......但是在release 或者外部运行是能捕获的. test cod ...

  10. .NET周刊【1月第1期 2025-01-05】

    国内文章 3款.NET开源.功能强大的通讯调试工具,效率提升利器! https://www.cnblogs.com/Can-daydayup/p/18631410 本文介绍了三款功能强大的.NET开源 ...