canvas实现动态替换人物的背景颜色
起因
今天遇见一个特别有意思的小功能。
就是更换人物图像的背景颜色。
大致操作步骤就是:点击人物-实现背景颜色发生变化
将图片绘画到canvas画布上
我们需要将图片绘制到canvas画布上。
这样做的目的是为了方便我们去操作像素点来更改颜色。
首先创建 Image 的实例。将图片的地址赋值给图片实例src。
当图片加载完成后，onload 事件可以知道图片是否加载完成
根据 Image的实例将图片大小赋值给画布，让他们大小保持一致。
最后使用 ctx.drawImage来进行绘画就行
特别提醒的是：src 属性一定要写到 onload 的后面，否则程序在 IE 中会出错。
<body>
<canvas id="canvas">
</body>
<script type="text/javascript">
// 获取dom节点
const canvas = document.getElementById('canvas')
//获取上下文
const ctx = canvas.getContext('2d');
// 将图片绘制到canvas画布上
function initPic(picInfo){
// 创建一个图片的实例
const img = new Image()
// 引入图片的地址
img.src = picInfo.url
img.onload =()=>{
// 设置画布的宽高与图片的保持一致
canvas.width= img.width
canvas.height= img.height
// 开始绘画
ctx.drawImage(img, 0, 0 );
}
}
initPic({
url: './src/assets/person.png'
})
</script>
drawImage 的简单介绍
canvas的drawImage()提供了更多在canvas上绘制图像的方法。
drawImage() 方法有三种形式：
drawImage(image, dx, dy) 在指定的 (dx, dy) 位置绘制图像。
drawImage(image, dx, dy, width, height) 在指定的 (dx, dy) 位置，并使用指定的宽度和高度绘制图像。
drawImage(image, sourceX, sourceY, sourceWidth, sourceHeight, dx, dy, width, height) 在指定的 (dx, dy) 位置，并使用指定的宽度和高度绘制图像。图像的源坐标和尺寸也指定了。
image:允许任何的画布图像源
注册事件获取点击时的坐标对应的颜色
我们通过 e.offsetX, e.offsetY 可以轻松拿到点击的坐标x,y。
可以通过 getImageData 获取到图片的所有像素点的颜色。
但是怎么通过点击的位置(x，y)获取到对应的的像素索引呢？
其实他们的关系是这样的：
// 每个像素占用4个字节（RGBA）
const index = (y * image.width + x) * 4;
根据上面这个公式，我们可以知道坐标对应的像素索引。
有了索引，我们可以拿到坐标对应的颜色
function clickMy(e){
// 获取点击时的坐标
let x = e.offsetX
let y = e.offsetY
// 获取所有的像素点颜色
let imagedata = ctx.getImageData(0, 0, canvas.width, canvas.height);
console.log('获取所有的像素点颜色', imagedata)
// 这个坐标点对应的颜色
let clickColor = getColor(x,y, imagedata)
console.log('这个坐标点对应的颜色', clickColor)
}
// 计算点击坐标对应的像素索引
function bgIndex(x,y){
return (y * canvas.width + x) * 4;
}
// 根据索引得到颜色值
function getColor(x,y,imgData){
let i = bgIndex(x,y)
return [
imgData.data[i],
imgData.data[i+1],
imgData.data[i+2],
imgData.data[i+3]
]
}
// 注册事件
canvas.addEventListener("click", clickMy, false)
更改当前像素点的颜色
现在我们希望点击的这个点的颜色变成红色。
现在的我们可以拿到所有像素点,当前的坐标，坐标对应的颜色。
现在我们的主角出场了(此时灯光闪烁,五彩的光打在他的身上)
context.putImageData(imageData, x, y);
第1个参数：imageData: 包含了图像的所有像素数据,
通过ctx.getImageData(0, 0, canvas.width, canvas.height)可以获取到;
第2,3个参数表示坐标。
它用于将图像数据绘制到画布上。
这个方法允许开发者操作和绘制像素级别的数据,
从而实现复杂的图像效果和处理。
function clickMy(e){
// 获取点击时的坐标
let x =e.offsetX
let y = e.offsetY
// 获取所有的像素点颜色
let imagedata = ctx.getImageData(0, 0, canvas.width, canvas.height);
console.log('获取所有的像素点颜色', imagedata)
// 这个坐标点对应的颜色
let clickColor = getColor(x,y, imagedata)
console.log('这个坐标点对应的颜色', clickColor)
// 最后更改为红色的rgba值
let targetBgArr = [255,0,0,255]
// 更改颜色
function changeColor(x,y){
let i = bgIndex(x,y)
imagedata.data.set(targetBgArr, i)
}
changeColor(x,y)
// 更改当前像素点的颜色
ctx.putImageData(imagedata, 0, 0);
}
将被点击的点的相似颜色全部变为红色
我们通过两个颜色的rgba值相减，看rgba的各个绝对值之和。
来判断颜色的相似。
同时我页需要注意边界范围与颜色已经变为了目标颜色。
这个时候我们就需要停止调用函数了
核心代码
<!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">
</body>
<script type="text/javascript">
// 获取dom节点
const canvas = document.getElementById('canvas')
// 获取上下文
const ctx = canvas.getContext('2d',{
willReadFrequently:true
});
function initPic(picInfo){
// 创建一个图表的实例
const img = new Image()
img.onload =()=>{
// 设置画布的宽高与图片的保持一致
canvas.width= img.width
canvas.height= img.height
// 开始绘画
ctx.drawImage(img, 0, 0 );
}
// 引入图片的地址
img.src = picInfo.url
}
function clickMy(e){
// 获取点击时的坐标
let x =e.offsetX
let y = e.offsetY
// 获取所有的像素点颜色
let imagedata = ctx.getImageData(0, 0, canvas.width, canvas.height);
console.log('获取所有的像素点颜色', imagedata)
// 这个坐标点对应的颜色
let clickColor = getColor(x,y, imagedata)
console.log('这个坐标点对应的颜色', clickColor)
// 最后更改为红色的rgba值
let targetBgArr = [255,0,0,255]
function changeColor(x,y){
// 边界范围
if(x<0 || x>canvas.width || y<0 || y>canvas.height){
return
}
let color = getColor(x,y,imagedata )
// 相似颜色的相差值
if(diffBg(color,clickColor)>150){
return
}
// 已经变为了目标色(红色)
if(diffBg(color,targetBgArr)==0){
return
}
let i = bgIndex(x,y)
// 在内存中更改像素的颜色
imagedata.data.set(targetBgArr, i)
// 改变周围(上下左右)的颜色
changeColor(x+1,y)
changeColor(x-1,y)
changeColor(x,y+1)
changeColor(x,y-1)
}
changeColor(x,y)
// 将内存中的像素点的颜色(重新绘制在画布上)
ctx.putImageData(imagedata, 0, 0);
}
// 计算点击坐标对应的像素索引
function bgIndex(x,y){
return (y * canvas.width + x) * 4;
}
// 根据索引得到颜色值
function getColor(x,y,imgData){
let i = bgIndex(x,y)
return [
imgData.data[i],
imgData.data[i+1],
imgData.data[i+2],
imgData.data[i+3]
]
}
// 查看两个颜色的相差值
function diffBg(color1,color2){
// 我们是取两个颜色的绝对值相加
return Math.abs(color1[0] -color2[0]) +
Math.abs(color1[1] -color2[1]) +
Math.abs(color1[2] -color2[2]) +
Math.abs(color1[3] -color2[3])
}
// 注册事件
canvas.addEventListener("click", clickMy, false)
initPic({
url: '../assets/person1.png'
})
</script>
</html>
更改为按钮，背景发生改变
上面我们实现了，点击背景色，实现颜色的更改。
但是实际的过程中。
我们是不知道背景颜色的，怎么去确认背景颜色呢？
其实，可以默认坐标为(4，4)是背景颜色。
在实际的过程中，其实这个位置99.9999%是背景色。
我们是先选择颜色，然后点击确定，实现颜色的更改
现在我们来优化一下。让用户自己选择背景色，选择好后。
点击确定，背景颜色就发生变化
<!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>
</style>
</head>
<body>
<div>
<canvas id="canvas">
</div>
<input type="color" id="color" >
<button id="red">确定</button>
</body>
<script type="text/javascript">
// 获取dom节点
const canvas = document.getElementById('canvas')
// 获取上下文
const ctx = canvas.getContext('2d',{
willReadFrequently:true
});
// 将16进制转化为rgba的颜色值
function changeRGBA(hex) {
// 去除 # 开头的第一个字符
hex = hex.slice(1);
// 将16进制字符串转换rgba
let rgba = [];
for (let i = 0; i < 6; i += 2) {
let byte = parseInt(hex.substr(i, 2), 16);
rgba.push(byte);
}
// 添加 alpha 通道
rgba.push(255);
// 返回 RGBA 颜色值
return rgba;
}
function initPic(picInfo){
// 创建一个图表的实例
const img = new Image()
img.onload =()=>{
// 设置画布的宽高与图片的保持一致
canvas.width= img.width
canvas.height= img.height
// 开始绘画
ctx.drawImage(img, 0, 0 );
}
// 引入图片的地址
img.src = picInfo.url
}
function clickMy(e, type){
let color = document.getElementById('color')
// 4,4的地方默认为是背景颜色
let x = 4
let y = 4
// 获取所有的像素点颜色
let imagedata = ctx.getImageData(0, 0, canvas.width, canvas.height);
// 这个坐标点对应的颜色
let clickColor = getColor(x,y, imagedata)
console.log('这个坐标点对应的颜色', clickColor)
// 颜色为用户选择的值
let targetBgArr = changeRGBA(color.value)
function changeColor(x,y){
// 边界范围
if(x<0 || x>canvas.width || y<0 || y>canvas.height){
return
}
let color = getColor(x,y,imagedata )
// 相似颜色的相差值
if(diffBg(color,clickColor)>150){
return
}
// 已经变为了目标色(红色)
if(diffBg(color,targetBgArr)==0){
return
}
let i = bgIndex(x,y)
// 在内存中更改像素的颜色
imagedata.data.set(targetBgArr, i)
// 改变周围(上下左右)的颜色
changeColor(x+1,y)
changeColor(x-1,y)
changeColor(x,y+1)
changeColor(x,y-1)
}
changeColor(x,y)
// 将内存中的像素点的颜色(重新绘制在画布上)
ctx.putImageData(imagedata, 0, 0);
}
// 计算点击坐标对应的像素索引
function bgIndex(x,y){
return (y * canvas.width + x) * 4;
}
// 根据索引得到颜色值
function getColor(x,y,imgData){
let i = bgIndex(x,y)
return [
imgData.data[i],
imgData.data[i+1],
imgData.data[i+2],
imgData.data[i+3]
]
}
// 查看两个颜色的相差值
function diffBg(color1,color2){
// 我们是取两个颜色的绝对值相加
return Math.abs(color1[0] -color2[0]) +
Math.abs(color1[1] -color2[1]) +
Math.abs(color1[2] -color2[2]) +
Math.abs(color1[3] -color2[3])
}
// 注册事件
canvas.addEventListener("click", clickMy, false)
red.addEventListener("click", clickMy, false)
initPic({
url: '../assets/person1.png'
})
</script>
</html>
最后的功能-下载
上面我们已经成功实现让用户选择颜色。
更换用户自己选择的颜色。
下载我们只需要实现下载功能就好了。
下载功能主要使用 canvas.toDataURL
然后利用a标签进行下载
<button id="down">下载</button>
down.addEventListener('click',()=>{
let imgURL = canvas.toDataURL({format: "image/png", quality:1, width:canvas.width, height:canvas.height});
let link = document.createElement('a');
link.download = "人物图片";
link.href = imgURL;
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
})
canvas实现动态替换人物的背景颜色的更多相关文章
- Android使用属性动画ValueAnimator动态改变SurfaceView的背景颜色
以下是主要代码,难点和疑问点都写在注释中: /** * 开始背景动画(此处为属性动画) */ private void startBackgroundAnimator(){ /* *参数解释: *ta ...
- iOS平台设置系统状态栏（通知栏、顶部状态栏）样式背景颜色或透明
5+App开发 状态栏 配置系统状态栏样式 iOS平台可支持对系统状态栏样式的配置,在应用manifest.json文件的plus->distribute->apple下添加UIStatu ...
- Atitit 动态按钮图片背景颜色与文字组合解决方案
Atitit 动态按钮图片背景颜色与文字组合解决方案 转换背景颜色,setFont("cywe_img", fontScale, 50, 5) 设置文字大小与坐标 文字分拆,使用字 ...
- Javascript技巧实例精选(1)—鼠标选择动态改变网页背景颜色
>>点击这里下载html源文件代码<< 采用Javascript实现,用鼠标点击相应颜色,动态改变网页背景颜色 这是截图 相应的Javascript源代码为: var hex ...
- 【C#/WPF】Button按钮动态设置Background背景颜色
学习笔记: 在XAML中给Button设置颜色大家都懂的,本篇只是记录用C#代码动态生成的按钮设置Background背景颜色. new一个Button,设置Background时可看到该属性类型是S ...
- EasyUI/TopJUI之如何动态改变下拉列表框ComboBox输入框的背景颜色
简单记录一下 前段时间接到客户需求:动态改变下拉列表框ComboBox输入框的背景颜色. 刚开始想的很简单在用户选择列表项的时候,判断一下列表框的value值添加相应的背景颜色就OK了,然而在实际操作 ...
- 【VS开发】VS2010 MFC中控件、对话框等背景颜色动态修改的方法
[VS开发]VS2010 MFC中控件.对话框等背景颜色动态修改的方法 标签(空格分隔):[VS开发] 声明:引用请注明出处http://blog.csdn.net/lg1259156776/ 说明: ...
- CSS 之动态变换背景颜色
先上效果图 HTML代码: 123456789 <div class="header"> <h1>GCCHRN'S BLOG</h1> < ...
- jquery动态改变背景颜色插件
GETHUB下载地址 背景颜色用animate方法时时无法改变颜色的 所以要使用插件进行补充. 用法: <!DOCTYPE html> <html> <head> ...
- JavaScript实例技巧精选(14)—动态变化背景颜色
>>点击这里下载完整html源码<< 这是截图: 网页背景颜色随时间变化,核心代码如下: <SCRIPT LANGUAGE="JavaScript"& ...
随机推荐
- python 导出项目需要的库
输入命令: pip freeze > requirements.txt 产生的文件内容如下: asgiref==3.4.0 Django==3.2.4 django-debug-toolbar= ...
- OpenAI API访问速度不佳？试试用Vercel来加速！
前言 众所周知,使用openAI API在国内访问体验并不佳,经常遇到访问较慢或者访问失败的问题.本文着重讲讲怎么解决这个问题,让我们日常开发和使用能够更方便的体验到AI带来的便利 为了帮大家省钱,也 ...
- F-Beta-Score
F1-Score相关概念 F1分数(F1 Score),是统计学中用来衡量二分类(或多任务二分类)模型精确度的一种指标.它同时兼顾了分类模型的准确率和召回率. F1分数可以看作是模型准确率和召回率的一 ...
- 音视频FAQ（一）：视频直播卡顿
一.摘要 本文介绍了视频直播卡顿的四个主要原因,用户网络问题.用户设备性能问题.技术路线的选择和实现问题.因本文主要阐述视频直播的卡顿,故技术路线的实现指的是:CDN供应商的实现问题,包含CDN性能不 ...
- VS2015项目.net-framework-4.5.2升级或新建项目无法选择framework 4.6.2（解决办法）
VS2015里面没有.NET Framework 4.6.2 VS2015默认安装的目标框架最高是.NET Framework 4.6.1,但是我的项目里面某些NuGet软件包更新需要依赖.NET F ...
- xlwt写入excel时候的合并单元格
简单版 import xlwt workbook = xlwt.Workbook() worksheet = workbook.add_sheet('My sheet') # 合并第0行的第0列到第3 ...
- WebAPI接口文档快速编写
近期项目使用了WebAPI,需要先给出接口文档,本着能省事就省事的原则,自然最好是能找到自动生成文档的方式. 一.使用Apifox,官网写着这是个API一体化协作平台,说白了,对于我来说,这就是个测试 ...
- Unity 游戏开发、02 基础篇 | 知识补充、简单使用动画、动画状态机
前置笔记(由浅入深) Unity 游戏开发.01 基础篇 2 场景操作 3D场景 Q 手型工具(鼠标中键):上下左右移动场景 ALT + 鼠标左键:以视图为中心旋转 鼠标右键:以观察者为中心旋转 SH ...
- 【python技巧】文本处理-re库字符匹配
目录 1. 正则表达式 1.1 测试工具 1.2 限定符 1.3 字符集 1.4 运算符 1.5 元字符 1.6 懒惰匹配和贪婪匹配 我们读取文件内容,肯定不是单纯为了输出或者重新写入,对于文本我们一 ...
- Solution -「营业」「CF 527C」Glass Carving
Description Link. 有一个块 \(n\times m\) 的矩形,有 \(q\) 次操作,每次把矩形横 / 竖着切一刀,问切完后的最大矩形面积. Solution 一个不同于大多数人. ...