canvas操作图片像素点保证你看的明明白白
开场白
今天遇到一个场景；就是更改一个图片的颜色；
当听到这个。我直呼好家伙；这个是要上天了呀。
但是仔细一思考；借助canvas好像也能实现；
于是下来研究了一下，并不难；
我们下面来看看怎么实现的
基本思路
主要是获取图片的像素点；ctx.getImageData()
然后去更改图片的像素点；
最后绘制在画布上ctx.putImageData()
特别提醒：
在canvas的getImageData方法中，一个像素点由四个元素表示；
通常这四个元素是[r, g, b, a]，分别代表红、绿、蓝和透明度（alpha通道）。
r（红色通道）：范围从0到255，表示红色的强度。
g（绿色通道）：范围从0到255，表示绿色的强度。
b（蓝色通道）：范围从0到255，表示蓝色的强度。
a（透明度/alpha通道）：范围从0到255，表示像素的透明度。
0是完全透明的，255是完全不透明的。
获取图片的所有像素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<canvas id="canvas" width="1000" height="500" ></canvas>
</body>
<script>
let canvas =document.getElementById('canvas')
// 获取画笔(上下文)
let ctx= canvas.getContext('2d')
// 创建一个图片实例
let img = new Image()
// 给图片赋值
img.src= './img/01.png'
// 图片加载完成后绘制在画布上
img.onload = function(){
// 从坐标0，0开始绘制；
ctx.drawImage(img, 0, 0, 584, 333);
// 获取图像的所有像素
let allImgData = ctx.getImageData(0, 0, 584, 333);
console.log('获取图像的所有像素==>', allImgData)
}
</script>
</html>
操作图片像素点全部变为黄色
img.onload = function(){
// 从坐标0，0开始绘制；
ctx.drawImage(img, 0, 0, 584, 333);
// 获取图像的所有像素
let allImgData = ctx.getImageData(0, 0, 584, 333);
console.log('获取图像的所有像素==>', allImgData)
// 修改像素点;变成黄色; 4个为一组所以是:i+=4
for(let i=0;i< allImgData.data.length;i+=4){
allImgData.data[i] = 255
allImgData.data[i+1] = 255
allImgData.data[i+2] = 0
allImgData.data[i+3] = 255
}
// 将像素点绘制上去
ctx.putImageData(allImgData, 0,0);
}
将当前图片变为灰色
img.onload = function(){
// 从坐标0，0开始绘制；
ctx.drawImage(img, 0, 0, 584, 333);
// 获取图像的所有像素
let allImgData = ctx.getImageData(0, 0, 584, 333);
console.log('获取图像的所有像素==>', allImgData)
// 修改像素点;变成灰色
for(let i=0;i< allImgData.data.length;i+=4){
// 计算当前像素的平均值
let avg = ( allImgData.data[i] + allImgData.data[i+1] + allImgData.data[i+2])/3
allImgData.data[i] = avg
allImgData.data[i+1] = avg
allImgData.data[i+2] = avg
allImgData.data[i+3] = 255
}
// 将像素点绘制上去
ctx.putImageData(allImgData, 0,0);
}
有人看到这里会开喷
就你这变成灰色，写了这么多的代码
我一行css就搞定了。
这样确实是可以的；我这里主要是想表达怎么更加精确去操作图片像素；
大佬们不要开喷
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
canvas {
/* 使用CSS3将元素转换为灰度。100%表示完全灰度。 */
filter: grayscale(100%);
/* 兼容主流浏览器 */
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%);
-o-filter: grayscale(100%);
/* 使用SVG滤镜实现灰度效果，用于一些不支持CSS滤镜的旧浏览器。 */
filter: url("data:image/svg+xml;utf8,#grayscale");
/* 用于旧版本的IE */
filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
/* - 这也是用于WebKit浏览器的，灰度值设置为1而不是100%，因为某些旧版本的WebKit浏览器中可能是必需的。 */
-webkit-filter: grayscale(1);
}
</style>
</head>
<body>
<canvas id="canvas" width="1000" height="500" ></canvas>
</body>
<script>
let canvas =document.getElementById('canvas')
// 获取画笔(上下文)
let ctx= canvas.getContext('2d')
// 创建一个图片实例
let img = new Image()
// 给图片赋值
img.src= './img/01.png'
// 图片加载完成后绘制在画布上
img.onload = function(){
// 从坐标0，0开始绘制；
ctx.drawImage(img, 0, 0, 584, 333);
}
</script>
透骨色
img.onload = function(){
// 从坐标0，0开始绘制；
ctx.drawImage(img, 0, 0, 584, 333);
// 获取图像的所有像素
let allImgData = ctx.getImageData(0, 0, 584, 333);
console.log('获取图像的所有像素==>', allImgData)
// 修改像素点;变成透骨色
for(let i=0;i< allImgData.data.length;i+=4){
let avg = ( allImgData.data[i] + allImgData.data[i+1] + allImgData.data[i+2])/3
allImgData.data[i] = 255- allImgData.data[i]
allImgData.data[i+1] = 255- allImgData.data[i+1]
allImgData.data[i+2] = 255- allImgData.data[i+2]
allImgData.data[i+3] = 255
}
// 将像素点绘制上去
ctx.putImageData(allImgData, 0,0);
}
canvas操作图片像素点保证你看的明明白白的更多相关文章
- 在c#中用指针操作图片像素点
在Bitmap类中有两个函数SetPixel,GetPixel,分别用来设置或读取图片中指定点的颜色(这里发现了VS的一个错误,SetPixel的文档说明写的是“获取颜色”??). 当要对一幅图进行相 ...
- canvas操作图片，进行面板画图，旋转等
HTML5 <canvas> 标签用于绘制图像(通过脚本,通常是 JavaScript). 不过,<canvas> 元素本身并没有绘制能力(它仅仅是图形的容器) - 您必须使用 ...
- 国庆总结:echarts自定义颜色主题,保证你看的明明白白
为什么需要使用颜色主题 随着用户审美越来越高,不再是过去那样只注重功能. 所以对界面的颜色样式都具有一定的审美要求 此时颜色是否好看就非常重要了 因为人都是视觉动物 对界面的第一印象肯定都是颜色. 如 ...
- Vue3.2中的setup语法糖,保证你看的明明白白！
vue3.2 到底更新了什么? 根据原文内容的更新的内容主要有以下 5 块: 1.SSR:服务端渲染优化.@vue/server-renderer包加了一个ES模块创建, 与Node.js解耦,使在非 ...
- vue下一代状态管理Pinia.js 保证你看的明明白白！
1.pinia的简单介绍 Pinia最初是在2019年11月左右重新设计使用Composition API的 Vue 商店外观的实验. 从那时起,最初的原则相同,但 Pinia 适用于 Vue 2 和 ...
- vue混入mixin的使用，保证你看的明明白白！
场景描述 有些时候,我们发现有些组件部分功能代码是几乎是一样的. 这个时候,我们就可以将相同的逻辑代码抽离出来 此时我们的主角混入mixin就登场了 下面我们有a-test和b-test两个组件,点击 ...
- node使用node-xlsx实现excel的下载与导入，保证你看的明明白白
需求简介 很多时候,我们都会有这样一个业务. 将列表中的数据导出为excel. 这样做的目的是为了方便查看,同时可以保存在本地归档. 还可以将导出的Excel后的数据进行加工. node-xlsx 的 ...
- canvas插入图片设置背景，渐变
##在canvas中插入图片(需要image对象) 1.canvas操作图片时,必须要等图片加载完才能操作 2.drawImage(image, x, y, width, height) 其中 ima ...
- 神奇的canvas——巧用 canvas 为图片添加水印
代码地址如下:http://www.demodashi.com/demo/11637.html 很久之前写过一篇关于 canvas 的文章,是通过 canvas 来实现一个绚丽的动画效果,不管看过没看 ...
- canvas学习笔记：canvas对图片的像素级处理--ImageData的应用
学习了canvas的基本绘图功能后,惊喜的发现canvas对图片数据也有相当强大的处理功能,能够从像素级别操作位图,当然[lte ie8]不支持. 主要的函数有三个: ctx.createImageD ...
随机推荐
- 关于HTTPS认证，这里解决你所有疑惑
摘要:从签发证书到数据加密交互,按流程的进展讲解HTTPS认证过程内容和原理. 本文分享自华为云社区<故事+图文,一次性解决你对HTTPS认证过程的所有疑惑>,作者:breakDraw. ...
- 多领域应用落地，火山引擎ByteHouse加速云数仓升级
更多技术交流.求职机会,欢迎关注字节跳动数据平台微信公众号,回复[1]进入官方交流群 近日,火山引擎数智平台VeDI直播活动「超话数据」在线举办,来自火山引擎的产品及解决方案专家分享了以ByteH ...
- WxJava for Solon - 咱也不知道为啥要写
? 应 Solon 技术交流群里小伙伴的要求,我分享下在 Solon 中使用 WxJava 的经验.类库. 具体实现 提供统一的 Yaml 配置 package cn.edu.hnuahe.mount ...
- Go--日志
一.Logger go语言默认提供的日志功能,包为ttps://golang.org/pkg/log/ 优势: 使用非常简单,可以设置任何io.Writer作为日志记录输出并向其发送要写入的日志 劣势 ...
- awk 文本编辑器
1.简介 文本编辑器 非交互式的编辑器 编程语言 功能:对文本数据进行汇总和处理 是一个报告生成器 能够对数据进行排版 工作模式:行工作模式 读入一行 将整行内容存在$0里,一行等于一个记录 记录分隔 ...
- linux tar解压命令总结
把常用的tar解压命令总结下,当作备忘: -c:建立压缩档案 -x:解压 -t:查看内容 -r:向压缩归档文件末尾追加文件 -u:更新原压缩包中的文件 这五个是独立的命令,压缩解压都要用到其中一个,可 ...
- 一文搞清楚Java中的方法、常量、变量、参数
写在开头 在上一篇文章:一文搞清楚Java中的包.类.接口 中我们讲了Java中的包.类和接口,今天继续将剩下的方法.常量.变量以及参数梳理完. Java中的变量与常量 在JVM的运转中,承载的是数据 ...
- 基于html5开发的Win12网页版，抢先体验
据 MSPoweruser 报道,Windows 11虽然刚刚开始步入正轨,但最新爆料称微软已经在开启下一个计划,Windows 12 的开发将在 去年3 月份开始.德国科技网站 Deskmodder ...
- AHB 局限性
AHB's problem SoC bus 架构 AXI is used more and more 频率200M使用AHB,频率再升高就使用AXI AHB的问题 AHB协议本身限制要求较高,比如co ...
- Introduction to DFT
服务器使用 登陆服务器:输入账号密码 打开terminal,保证至少一个terminal窗口是打开的 取消Linux操作系统的屏幕保护 设置Linux EDA工具配置 // 自定义环境变量设置 gvi ...