同步发布：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. Karmada v1.12 版本发布！单集群应用迁移可维护性增强

    本文分享自华为云社区<Karmada v1.12 版本发布!单集群应用迁移可维护性增强>,作者:云容器大未来. Karmada 是开放的多云多集群容器编排引擎,旨在帮助用户在多云环境下部署 ...

  2. UML之类型

    类型是对一个元素能够拥有的值的描述.类型可能是一个无限的集合,例如Integers类型(整数),理论上它的值有无限个:也可能是一个有限的集合,例如Boolean类型(布尔),它只有True和False ...

  3. Opencv 中 Mat中元素的值读取方法总结

    1.利用 at 函数读取 (1)单通道图像读取方式 Mat img1 = imread(filename,IMREAD_GRAYSCALE); for( size_t nrow = 0; nrow & ...

  4. 今天记录一下vue更改时间格式的js

    首先定义js文件,我这边定义为date.js,里面包含了增加零的处理 //date.jsexport function formatDate(date, fmt) { if (/(y+)/.test( ...

  5. springcloud-路由gateway-zuul

    spring-cloud-Gateway是spring-cloud的一个子项目.而zuul则是netflix公司的项目,只是spring将zuul集成在spring-cloud中使用而已.因为zuul ...

  6. linux基础知识(基本认知、操作命令、常用技巧)

    文章目录 Linux基本认知 容量大小 自动补全命令或文件(夹) 复用之前的命令 Linux文件系统 Linux中命令和执行程序长什么样子 执行过的历史命令的记录文件的位置 linux的隐藏文件 Li ...

  7. w3cschool-Groovy 教程

    Groovy的特点 Groovy中有以下特点: 同时支持静态和动态类型. 支持运算符重载. 本地语法列表和关联数组. 对正则表达式的本地支持. 各种标记语言,如XML和HTML原生支持. Groovy ...

  8. Redis的高可用？(主从、哨兵、集群)

    高可用有两个含义:一是数据尽量不丢失,二是保证服务尽可能可用. AOF 和 RDB 数据持久化保证了数据尽量不丢失,那么多节点来保证服务尽可能提供服务. 一般在实际生产中,服务不会部署成单节点,主要是 ...

  9. LinkedList可以同时作为堆栈和队列使用

    Java里的LinkedList可以同时作为堆栈和队列使用,因此在使用的时候总是会弄混他们的方法,此文就简单总结一下作为不同数据结构使用时的用法. 作为队列   方法 声明 任意两种方法: 一是直接声 ...

  10. web40 无参数rce

    点击查看代码 <?php /* # -*- coding: utf-8 -*- # @Author: h1xa # @Date: 2020-09-04 00:12:34 # @Last Modi ...