vue+canvas来实现图像处理中的亮度和对比度的调节

最新推荐文章于 2024-07-25 11:00:49 发布
最新推荐文章于 2024-07-25 11:00:49 发布
阅读量2.8k 收藏 3
点赞数 2
文章标签： vue.js javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42400955/article/details/124443511
版权

目前存在一点问题，就是canvas在浏览器上会出现跨域问题，把本地图片上传到服务器，用服务器的图片，就可以解决。

JavaScript版

<div class="div_tool">
			颜色：
			<label><input name="Color" type="radio" value="0" checked="" onchange="ColorChange()">黑白 </label>
			<label><input name="Color" type="radio" value="1" onchange="ColorChange()">彩色 </label>
			<div>
				<label class="lalbel_1">对比度：</label><input type="range" id="RangeContrast" min="0" max="127"
					onchange="ContrastChange()">
				<label id="Contrast">67</label>
			</div>
			<div>
				<label class="lalbel_1">亮度：</label><input type="range" id="RangeBrightness" min="128" max="255"
					onchange="BrightnessChange()">
				<label id="Brightness">168</label>
			</div>
		</div>
		<div class="div_canvas">
			<canvas id="mycanvas" width="900px" height="350px"></canvas>
		</div>
		<div class="div_img">
			<img id="oct" src="./test_files/new.png">
		</div>
	<script type="text/javascript">
			var colorbar1 = [
				[0, 0, 0],
				[0, 0, 0],
				[0, 0, 0],
				[0, 0, 0],
				[0, 0, 0],
				[0, 0, 0],
				[0, 0, 0],
				[0, 0, 0],
				[0, 0, 0],
				[0, 0, 0],
				[0, 0, 0],
				[0, 0, 0],
				[0, 0, 0],
				[0, 0, 0],
				[0, 0, 0],
				[0, 0, 0],
				[0, 0, 0],
				[0, 0, 0],
				[0, 0, 0],
				[0, 0, 0],
				[0, 0, 0],
				[0, 0, 0],
				[0, 0, 0],
				[0, 0, 0],
				[0, 0, 0],
				[0, 0, 0],
				[0, 0, 0],
				[0, 0, 0],
				[0, 0, 0],
				[0, 0, 0],
				[0, 0, 0],
				[0, 0, 0],
				[0, 0, 0],
				[0, 0, 0],
				[0, 0, 0],
				[0, 0, 0],
				[0, 0, 0],
				[0, 0, 0],
				[0, 0, 0],
				[0, 0, 0],
				[0, 0, 0],
				[0, 0, 0],
				[0, 0, 0],
				[0, 0, 0],
				[0, 0, 0],
				[0, 0, 0],
				[0, 0, 0],
				[0, 0, 0],
				[0, 0, 0],
				[0, 0, 0],
				[0, 0, 0],
				[0, 0, 0],
				[0, 0, 0],
				[0, 0, 0],
				[0, 0, 0],
				[0, 0, 0],
				[0, 0, 0],
				[0, 0, 0],
				[0, 0, 0],
				[0, 0, 0],
				[0, 0, 0],
				[0, 0, 0],
				[0, 0, 0],
				[0, 0, 0],
				[0, 0, 0],
				[0, 0, 0],
				[0, 0, 0],
				[0, 0, 0],
				[0, 0, 0],
				[0, 0, 0],
				[0, 0, 0],
				[0, 0, 0],
				[0, 0, 0],
				[0, 0, 0],
				[0, 0, 0],
				[0, 0, 0],
				[0, 0, 0],
				[0, 0, 0],
				[0, 0, 0],
				[0, 0, 0],
				[0, 0, 0],
				[0, 0, 0],
				[0, 0, 0],
				[0, 0, 0],
				[0, 0, 0],
				[0, 0, 0],
				[0, 0, 0],
				[0, 0, 0],
				[0, 0, 0],
				[0, 0, 0],
				[0, 0, 0],
				[8, 8, 7],
				[22, 23, 44],
				[4, 9, 77],
				[0, 15, 114],
				[0, 24, 136],
				[0, 36, 155],
				[0, 46, 170],
				[0, 56, 179],
				[0, 69, 188],
				[0, 87, 192],
				[0, 108, 197],
				[0, 126, 201],
				[0, 146, 205],
				[0, 164, 206],
				[0, 176, 203],
				[0, 190, 198],
				[0, 202, 194],
				[0, 217, 188],
				[0, 220, 175],
				[0, 222, 159],
				[0, 224, 142],
				[0, 227, 127],
				[0, 229, 111],
				[0, 231, 97],
				[0, 233, 79],
				[0, 235, 63],
				[0, 237, 48],
				[0, 240, 32],
				[0, 244, 16],
				[7, 248, 4],
				[18, 251, 0],
				[33, 255, 0],
				[46, 255, 0],
				[59, 255, 0],
				[73, 255, 0],
				[86, 255, 0],
				[100, 255, 0],
				[111, 255, 0],
				[123, 255, 0],
				[136, 255, 0],
				[150, 255, 0],
				[163, 255, 0],
				[177, 255, 0],
				[189, 255, 0],
				[204, 255, 0],
				[214, 255, 0],
				[221, 255, 0],
				[227, 254, 0],
				[233, 254, 0],
				[239, 253, 0],
				[245, 253, 0],
				[251, 253, 0],
				[254, 249, 0],
				[255, 242, 0],
				[255, 234, 0],
				[255, 227, 0],
				[255, 219, 0],
				[255, 213, 0],
				[255, 204, 0],
				[255, 196, 0],
				[255, 189, 0],
				[255, 182, 0],
				[255, 174, 0],
				[255, 165, 0],
				[255, 155, 0],
				[255, 143, 0],
				[255, 132, 0],
				[255, 120, 0],
				[255, 110, 0],
				[255, 105, 0],
				[255, 99, 0],
				[255, 93, 0],
				[255, 87, 0],
				[255, 82, 0],
				[255, 76, 0],
				[255, 70, 0],
				[255, 66, 0],
				[255, 61, 0],
				[255, 55, 0],
				[255, 51, 0],
				[255, 47, 0],
				[255, 42, 0],
				[255, 40, 0],
				[255, 38, 0],
				[255, 36, 0],
				[255, 34, 0],
				[255, 32, 0],
				[255, 31, 0],
				[255, 29, 0],
				[255, 28, 0],
				[255, 25, 0],
				[255, 24, 1],
				[255, 22, 4],
				[255, 20, 8],
				[255, 19, 11],
				[255, 17, 15],
				[255, 25, 25],
				[255, 39, 39],
				[255, 52, 52],
				[255, 66, 66],
				[255, 80, 80],
				[255, 99, 99],
				[255, 120, 120],
				[255, 128, 128],
				[255, 138, 138],
				[255, 150, 150],
				[255, 158, 158],
				[255, 168, 168],
				[255, 177, 177],
				[255, 182, 182],
				[255, 191, 191],
				[255, 198, 198],
				[255, 204, 204],
				[255, 213, 213],
				[255, 219, 219],
				[255, 226, 226],
				[255, 235, 235],
				[255, 237, 237],
				[255, 239, 239],
				[255, 242, 242],
				[255, 243, 243],
				[255, 246, 246],
				[255, 248, 248],
				[255, 250, 250],
				[255, 252, 252],
				[255, 254, 254],
				[255, 255, 255],
				[255, 255, 255],
				[255, 255, 255],
				[255, 255, 255],
				[255, 255, 255],
				[255, 255, 255],
				[255, 255, 255],
				[255, 255, 255],
				[255, 255, 255],
				[255, 255, 255],
				[255, 255, 255],
				[255, 255, 255],
				[255, 255, 255],
				[255, 255, 255],
				[255, 255, 255],
				[255, 255, 255],
				[255, 255, 255],
				[255, 255, 255],
				[255, 255, 255],
				[255, 255, 255],
				[255, 255, 255],
				[255, 255, 255],
				[255, 255, 255],
				[255, 255, 255],
				[255, 255, 255],
				[255, 255, 255],
				[255, 255, 255],
				[255, 255, 255],
				[255, 255, 255],
				[255, 255, 255],
				[255, 255, 255],
				[255, 255, 255],
				[255, 255, 255],
				[255, 255, 255],
				[255, 255, 255],
				[255, 255, 255],
				[255, 255, 255],
				[255, 255, 255],
				[255, 255, 255]
			];
			var colorbar = [
				[0, 0, 0],
				[0, 0, 0],
				[0, 0, 0],
				[0, 0, 0],
				[0, 0, 0],
				[0, 0, 0],
				[0, 0, 0],
				[0, 0, 0],
				[0, 0, 0],
				[0, 0, 0],
				[0, 0, 0],
				[0, 0, 0],
				[0, 0, 0],
				[0, 0, 0],
				[0, 0, 0],
				[0, 0, 0],
				[0, 0, 0],
				[0, 0, 0],
				[0, 0, 0],
				[0, 0, 0],
				[0, 0, 0],
				[0, 0, 0],
				[0, 0, 0],
				[0, 0, 0],
				[0, 0, 0],
				[0, 0, 0],
				[0, 0, 0],
				[0, 0, 0],
				[0, 0, 0],
				[0, 0, 0],
				[0, 0, 0],
				[0, 0, 0],
				[0, 0, 0],
				[0, 0, 0],
				[0, 0, 0],
				[0, 0, 0],
				[0, 0, 0],
				[0, 0, 0],
				[0, 0, 0],
				[0, 0, 0],
				[0, 0, 0],
				[0, 0, 0],
				[0, 0, 0],
				[1, 1, 1],
				[3, 3, 3],
				[4, 4, 4],
				[6, 6, 6],
				[7, 7, 7],
				[9, 9, 9],
				[10, 10, 10],
				[12, 12, 12],
				[13, 13, 13],
				[15, 15, 15],
				[16, 16, 16],
				[18, 18, 18],
				[19, 19, 19],
				[21, 21, 21],
				[22, 22, 22],
				[24, 24, 24],
				[25, 25, 25],
				[27, 27, 27],
				[28, 28, 28],
				[30, 30, 30],
				[31, 31, 31],
				[33, 33, 33],
				[34, 34, 34],
				[36, 36, 36],
				[37, 37, 37],
				[39, 39, 39],
				[40, 40, 40],
				[42, 42, 42],
				[43, 43, 43],
				[45, 45, 45],
				[46, 46, 46],
				[48, 48, 48],
				[49, 49, 49],
				[51, 51, 51],
				[52, 52, 52],
				[54, 54, 54],
				[55, 55, 55],
				[57, 57, 57],
				[58, 58, 58],
				[60, 60, 60],
				[61, 61, 61],
				[63, 63, 63],
				[64, 64, 64],
				[65, 65, 65],
				[67, 67, 67],
				[68, 68, 68],
				[70, 70, 70],
				[71, 71, 71],
				[73, 73, 73],
				[74, 74, 74],
				[76, 76, 76],
				[77, 77, 77],
				[79, 79, 79],
				[80, 80, 80],
				[82, 82, 82],
				[83, 83, 83],
				[85, 85, 85],
				[86, 86, 86],
				[88, 88, 88],
				[89, 89, 89],
				[91, 91, 91],
				[92, 92, 92],
				[94, 94, 94],
				[95, 95, 95],
				[97, 97, 97],
				[98, 98, 98],
				[100, 100, 100],
				[101, 101, 101],
				[103, 103, 103],
				[104, 104, 104],
				[106, 106, 106],
				[107, 107, 107],
				[109, 109, 109],
				[110, 110, 110],
				[112, 112, 112],
				[113, 113, 113],
				[115, 115, 115],
				[116, 116, 116],
				[118, 118, 118],
				[119, 119, 119],
				[121, 121, 121],
				[122, 122, 122],
				[124, 124, 124],
				[125, 125, 125],
				[127, 127, 127],
				[128, 128, 128],
				[129, 129, 129],
				[131, 131, 131],
				[132, 132, 132],
				[134, 134, 134],
				[135, 135, 135],
				[137, 137, 137],
				[138, 138, 138],
				[140, 140, 140],
				[141, 141, 141],
				[143, 143, 143],
				[144, 144, 144],
				[146, 146, 146],
				[147, 147, 147],
				[149, 149, 149],
				[150, 150, 150],
				[152, 152, 152],
				[153, 153, 153],
				[155, 155, 155],
				[156, 156, 156],
				[158, 158, 158],
				[159, 159, 159],
				[161, 161, 161],
				[162, 162, 162],
				[164, 164, 164],
				[165, 165, 165],
				[167, 167, 167],
				[168, 168, 168],
				[170, 170, 170],
				[171, 171, 171],
				[173, 173, 173],
				[174, 174, 174],
				[176, 176, 176],
				[177, 177, 177],
				[179, 179, 179],
				[180, 180, 180],
				[182, 182, 182],
				[183, 183, 183],
				[185, 185, 185],
				[186, 186, 186],
				[188, 188, 188],
				[189, 189, 189],
				[191, 191, 191],
				[192, 192, 192],
				[193, 193, 193],
				[195, 195, 195],
最低0.47元/天 解锁文章
Carefree1990
关注
  • 2
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
图片转ASCII字符图案的原理(可调整亮度对比度 宽高度)
仁扬
06-22 271
教你讲任意图片，转换为 ASCII 字符图案！基本原理是将 RGB 色彩转为 XYZ 色彩, 再从 XYZ 转到 Lab. Lab颜色空间中的L分量用于表示像素的亮度, 最小值是0(纯黑), 最大值是100(纯白), 而a表红绿, b表黄蓝……
Canvas像素调节—调节图片的明暗与对比度
bluedot的专栏
04-24 7207
前几周做了一个医疗展示CT图的项目，需要对DICOM文件进行解析展示并且在页面中对图像进行明暗和对比度的调节功能。费了许多精力将此功能做了出来（虽然使用的并不是DICOM文件中的窗宽/窗位，但也算是一种知识的学习），所以在此记录加深记忆及方便以后查阅。 canvas API及教程 由于要对图片进行操作（明暗及对比度的调节、反色）所以页面中使用img元素是不合适的，而HTML5中提供的can...
vue根据图片提取主题色/对颜色进行分类
hsyq586的博客
05-30 501
方法来获取颜色信息，其中seletor为选择器，index为每几个像素提取一次像素信息0-9任意数值，这里我提取了五个主要颜色信息，并保存在了colors[]数组中。最近发现taptap的主页首图是根据图片的颜色动态的切换底色的，颇有兴趣搜索了一下，了解到了相关原理，普遍是把图片转成canvas然后根据canvas的像素信息对颜色进行采样。传入一组颜色数据，可以根据提取到的颜色数据匹配最相近的色系，与主题保持同一种风格。莫兰迪色系为自己传入的颜色数据，可以匹配与传入的颜色最相近的色系，保持风格统一。
图像亮度/对比度的调整
源景.蒋的专栏
11-10 1万+
图像亮度/对比度的调整
图像处理之调整亮度与对比度
热门推荐
关注微信公众号【OpenCV学堂】
03-22 4万+
图像处理之调整亮度与对比度   很多时候，一张图像被过度曝光显得很白，或者光线不足显得很暗，有时候背景跟图像人物 也观察不清楚，这个时候可以通过调节图像的两个基本属性-亮度与对比度来获得整体效果 的提升，从而得到质量更高的图片。   基本原理： 图像亮度本质上图像中每个像素的亮度，每个像素的亮度本质上RGB值的大小，RGB值为0 是像素点为黑色，RGB都为255时像素点最亮，为白色
分享vue3+OpenTiny UI+cesium.js实现三维地球
通达的博客
03-23 1409
使用vue3 + OpenTiny UI + cesium 实现三维地球opentiny vue3 ui安装指南 https://opentiny.design/tiny-vue/zh-CN/os-theme/docs/installation yarn add @opentiny/vue@3。
Vue中如何进行图像处理与图像滤镜
徐师兄的博客
10-06 1171
在Vue中进行图像处理与图像滤镜是一个非常有用的功能，可以用于创建各种视觉效果和图像编辑器。无论您选择使用HTML5 Canvas还是CSS滤镜，Vue都提供了灵活的方式来实现这些功能。在实际应用中，您可以根据需求进一步扩展和自定义这些功能，以满足您的特定需求。希望本文对您有所帮助，让您更好地理解如何在Vue中进行图像处理与图像滤镜。
Day 178/200 Fabric.js 实现图片对比度控制
xinghuowuzhao的博客
12-16 1161
（一）需求 在标注图片时，需要控制对于同一图片的对比度，所以需要实现对于图片对比度的控制。 接下来是需求澄清 1、正常图片 2、对比度对比度设置为0.25时 3、对比度设置为-0.5时 （二）说明 定义说明 图像对比度指的是一幅图像中明暗区域最亮的白和最暗的黑之间不同亮度层级的测量，即指一幅图像灰度反差的大小。差异范围越大代表对比越大，差异范围越小代表对比越小，好的对比率120:1就可容易地显示生动、丰富的色彩，当对比率高达300:1时，便可支持各阶的颜色。 差异范围越大代表对比越大，差异范围越小代
vue项目使用cavans为图片实现复古、黑白、底片、浮雕、反向、模糊
qq_41227106的博客
07-27 1034
实现效果如下图 使用cavans进行对图片添加滤镜是根据图片每个像素点进行转变的，图主要是有三色素构成，红、绿、蓝，并结合清晰度来结合 当我们拿到一张照片的时候，画布可以使用drawImage方法把一张图绘制在画布上，然后使用getImageData方法幅度每个像素中的rgb值。 通过getImageData方法得出每个像素点的rgb值，他是已4 个位一个像素点，%4=1的是r值,%4=2是g值,%4=3是b值，%4=像素模糊值(0-255） 老照片 f...
【工具】1066- 这个 19.4K 的 canvas 库，功能很强大！
pingan8787
08-31 216
1导语我们想在画布上画个基本的简单形状的时候，使用 Canvas 不会觉得有什么繁琐。但当画布上需要任何形式的互动，绘制复杂的图形和在特定情况需要改变图片的时候,使用原生 canvas A...
用canvas写的一个对比度
08-03
在这个"用canvas写的一个对比度"的例子中，我们将探讨如何利用JavaScript操作Canvas API来调整图像的对比度，从而实现图片的动态视觉调整。 首先，Canvas API提供了一个名为`getImageData`的方法，它可以从画布上...
WebPhotoshop:仿照Photoshop的在线图像处理软件。演示地址：
05-02
基本的图像处理工具（色相/饱和度，亮度/对比度, 色阶，滤镜） 曲线调整工具 一些小工具(图片剪切、旋转，标尺，颜色选择器，操作记录等) 基于node的静态资源服务器 演示地址 项目截图 开发 安装 运行 构建 npm ...
tuiimageeditor使用HTML5Canvas实现的全功能照片图像编辑器配有很棒的过滤器
08-08
1. **丰富的编辑功能**：tui.image-editor 支持常见的图像编辑操作，如裁剪、旋转、缩放、调整亮度、对比度、饱和度、色调等。同时，它还提供了各种滤镜效果，用户可以选择不同的风格，如素描、卡通、老照片等。 2. ...
JS图片上传对比度饱和度调整代码.zip
07-05
在JavaScript中，对图片进行上传并调整其对比度和饱和度是常见的图像处理需求，尤其在Web应用中，用户可能希望实时预览处理效果。这个"JS图片上传对比度饱和度调整代码.zip"文件提供了一个解决方案，使得用户可以从...
有关图形图像的资源
01-06
例如，可以进行裁剪、调整亮度对比度、色彩平衡、添加滤镜效果、使用图层蒙版实现非破坏性编辑等。这些技能对于网页设计、广告制作、UI设计等都有重要作用。 在Web开发中，图形图像的优化是一个关键步骤。大型图像...
在Vue程序中，如何检测用户的登录状态并跳转到对应页面
exlink2012的专栏
07-25 375
通过以上步骤，你可以在Vue应用程序中检测用户的登录状态，并在用户尝试访问受保护页面时跳转到登录页面。同时，在用户登录和登出后，你可以根据需要跳转到相应的页面。
vue单页面 全屏 使用 screenfull 实现全屏（左侧菜单栏隐藏）
最新发布
m0_71835253的博客
07-25 483
vue单页面 全屏 使用 screenfull 实现全屏（左侧菜单栏隐藏）_vue在打开一个界面的时候隐藏侧边栏-CSDN博客
VUE中的重点*
qq_61132537的博客
07-22 1085
实际上就是一个闭包，因为vue是单页面应用，是由很多组件构成，每一个组件中都有一个data， 所以通过闭包给每一个组件创建了一个私有的作用域，这样就不会相互影响。
vue2+canvas 怎么实现围棋棋盘和落子
03-31
围棋棋盘的绘制可以使用 canvas 的绘图方法来实现。具体步骤如下： 1. 创建一个 canvas 元素，设置其宽高，将其添加到页面中。 2. 获取 canvas 的 2D 上下文对象，通过该对象进行绘图操作。 3. 绘制棋盘的线条，可以使用 `strokeRect()` 方法绘制棋盘的边框，使用 `moveTo()` 和 `lineTo()` 方法绘制棋盘的横竖线条。 4. 绘制棋盘的星位，可以使用 `fillArc()` 方法绘制棋盘上的五个交叉点。 落子的实现需要在 canvas 上监听鼠标事件，具体步骤如下： 1. 监听鼠标点击事件，当点击 canvas 区域时，获取鼠标点击的坐标。 2. 根据点击的坐标计算出落子的位置，确定落子的行列坐标。 3. 绘制落子的圆形或方形，可以使用 `fillArc()` 或 `fillRect()` 方法绘制。 4. 实现棋子的交替下落，可以使用一个变量或数组来存储当前是黑子还是白子，每次下落时切换该变量的值。
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值