同步发布：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. 【转载】 利用p6spy拦截并查看数据库执行操作

    https://blog.csdn.net/fanxiaobin577328725/article/details/71601760 一.简介 项目首 页:http://p6spy.github.io ...

  2. HarmonyOS Next 入门实战 - 关系型数据库、smartdb

    SQLite数据库 HarmonyOS的关系型数据库基于SQLite 导入模块 import { relationalStore } from '@kit.ArkData'; 实现步骤: 获取RdbS ...

  3. Socat 命令总结

    事以密成,语以泄败. 导航 介绍 基本语法 用法示例 回显输入 回显输入 over TCP/UDP 正向连接 shell 反向连接 shell 端口转发 网络服务 文件传输 管道传输 加密传输 TUN ...

  4. UML之包与包图

    了解UML的人都知道UML中也有包的概念,包在UML中作用与面向对象编程语言中类似,它是管理对象的工具,也是解决对象同名冲突的手段. 在UML中,包的表示图形是一个左上角带标签的矩形,而包名可以标注于 ...

  5. C#反序列化时，反射类型“XXX”时出错，提示：InvalidOperationException

    C#反序列化时,反射类型"XXX"时出错,提示:InvalidOperationException的原因是因为: 一个类必须至少有一个空的默认构造函数,才能由XmlSerializ ...

  6. 基于Netty，从零开发IM(三)：编码实践篇（群聊功能）

    本文由作者"大白菜"分享,有较多修订和改动.注意:本系列是给IM初学者的文章,IM老油条们还望海涵,勿喷! 1.引言 接上两篇<IM系统设计篇>.<编码实践篇(单 ...

  7. 前端开发常用git命令详细版

    1.新建代码库 当前目录创建一个git代码库 git init 新建一个目录文件 将其初始化为git代码库 git init [pro-name] 远端拉去项目 git clone [url] 2.基 ...

  8. Android稳定性(一)：内存使用指南

    本文同步发布于公众号:移动开发那些事:Android稳定性(一):内存使用指南 1 背景 团队内目前使用Flutter来开发移动端的应用,不可避免会涉及到一些原生代码的编写,而团队内有好些iOS出身的 ...

  9. 第九章 ThreadPoolExecutor源码解析

    ThreadPoolExecutor使用 + 工作机理 + 生命周期 1.最基础的线程池ThreadPoolExecutor 使用方式: 1 /** 2 * ThreadPoolExecutor测试类 ...

  10. 在 Windows 10 上实现免密码 SSH 登录

    前言 在日常开发中,SSH(Secure Shell)作为一种安全的远程登录协议,广泛用于 Linux 和 Windows 系统之间的连接.为了提高效率,我们可以通过配置免密码登录,省去每次连接时输入 ...