canvas实现取色器

// 取色器
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>取色器</title><style>.canvas-box {position: relative;width: 497px;height: 351px;margin: auto;}canvas {position: absolute;top: 0;left: 0;cursor: pointer;}.result {width: 300px;margin: auto;margin-top: 40px;display: flex;}.color {display: inline-block;height: 20px;width: 20px;margin-right: 20px;}</style>
</head>
<body><div class="canvas-box"><img id ='img' src="https://img1.baidu.com/it/u=1148520648,1390077994&fm=26&fmt=auto&gp=0.jpg" alt=""><canvas width="497" height="351" id='myCanvas'></canvas></div><div class="result">color：<span class="color"></span><input type="text"></div>
</body>
<script>var c = document.getElementById("myCanvas");var ctx=c.getContext("2d");var img = document.getElementById("img");var color = document.getElementsByClassName("color");var Input = document.getElementsByTagName("input");// 默认色黑色color[0].style.background = '#000';Input[0].value = 'rgba(0,0,0,1)';img.crossOrigin = '';img.onload = function(){// 图片加载完成在绘制图片ctx.drawImage(img,0,0);}function draw (x,y){// 取一像素的值const { data }  = ctx.getImageData(x,y,1,1);const R = data[0];const G = data[1];const B = data[2];const A = data[3] / 255;const rgba = `rgba(${R},${G},${B},${A})`;console.log(rgba)color[0].style.background = rgba;Input[0].value = rgba;console.log(Input[0].value)}c.onmousedown = function(e){const {x,y} = {x:e.offsetX,y:e.offsetY};draw(x,y);c.onmousemove = function(e){const {x,y} = {x:e.offsetX,y:e.offsetY};draw(x,y);}}c.onmouseup = function(){c.onmousemove = null;}// 实现点击input框复制取rgba数据Input[0].onclick = function(e){Input[0].select();}
</script>
</html>

用到的主要知识:

canvas的getImageData获取canvas上面的像素信息
获取鼠标相对于容器边框的坐标offsetX，offsetY，获取鼠标左边周边一像素的色值（对于坐标不太熟悉的朋友，可以移步获取鼠标坐标常用方法和获取元素宽高以及距离定位父元素距离）

对于比较基础的知识，这里我就不赘述了，如果想要学习的，那么可以看html5 canvas

取色器最终效果：

canvas实现取色器相关推荐

canvas像素操作取色器写入像素数据缩放和反锯齿保存图片
博客简介 HTML5中的canvas允许我们直接对像素进行操作,我们可以通过ImageData对象操纵像素数据,读取或将数据数组写入该对象中.这里还会介绍如何控制图像使其平滑(反锯齿)以及如何从Can ...
android 自定义取色器,【Android自定义View】仿Photoshop取色器ColorPicker(二)
ColorPicker 一款仿Photoshop取色器的Android版取色器. 前言上一篇已经简单介绍了ColorPicker的项目结构以及两种颜色空间,接下来我们详细解析一下ColorPicke ...
【Android】自定义控件－颜色选择器/取色器
第二篇博客,继续加油.有好东西我会陆续分享出来的! ColorPickerView 是之前一个智能家居项目实战中所写的自定义控件,主要用于取得RGB 0~255范围的值,然后转换成十六进制0~FF的值 ...
浏览器插件FeHelper学习：页面取色器
前言对于大部分前端开发者来说,FeHelper插件应该很多人都用过.我最常用的就是页面取色工具,但是有个小小的不足,获取到的颜色是16进制的,当需要rgb格式时还需要借助FeHelper提供的颜色转 ...
10款屏幕取色器/颜色拾取工具软件介绍及下载地址[转]
10款屏幕取色器/颜色拾取工具软件介绍及下载地址(附截图) 2009年12月07日 14:13 在做网页设计和程序界面的时候,看到比较喜欢的图片颜色,总是要拾取下来应用到自己的网页或图片的颜色中,但是 ...
Android --- 新版本取色器吸管工具点击无效，没反应
今天更新的 Android Studio ,在使用取色器吸管取色的时候发现点击没反应,发现不是没反应,而是很久之后才会有反应,我也不知什么情况,到网上搜索解决办法. 解决方法: 双击 shift,然后 ...
android 取色器_老板夸我PPT配色高级，以为我学过设计，其实我都是从Logo取色
我们都知道用好一个 logo,可以做出一套比较简洁而且精致的 PPT 模板. 为了让这个页面看起来更丰富一些,我们选取的颜色是 logo 的主色调: 虽然一直在强调我们要从 logo 中取色,但是在进 ...
windows 取色器_这款 Windows 10 官方「外挂」让你取色更便捷
去年微软针对 Windows 10 系统重启了 PowerToys 工具,并且针对 Windows 10 系统特性推出了一系列的小工具来改善 Windows 10 的易用性. 时隔一年后的今天,这款工 ...
colorpix取色小工具_Python版的取色器
大家好,好久没有更新,希望不要把我忘了啊,前几天工作中遇到一个小困难,我想去取一个图片某个区域的色值需要用一下,但是真的不知用什么工具,然后把图片发给同事,用他电脑上的PS查看了一下,感觉工作中没有一 ...

canvas实现取色器

canvas实现取色器相关推荐

最新文章

热门文章