颜色混合算法

最新推荐文章于 2024-11-09 20:38:27 发布
最新推荐文章于 2024-11-09 20:38:27 发布
阅读量286 收藏 7
点赞数 5
文章标签： 算法 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_38736186/article/details/140448602
版权 
<!-- /** 
* @fileOverview 接口文档填写
* 
* @module 
* @author 黄尧(355350) 
* @version 1.0.0 
* @description: 
* 
*/ -->

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1.0, maximum-scale=1.0" />
    <title></title>
    <script src="./modules/vue.min.js"></script>
    <link rel="stylesheet" href="./modules/element-ui.css" />
    <script src="./modules/element-ui.js"></script>
    <script src="./node_modules/sortablejs/Sortable.min.js"></script>
    <script src="./node_modules/vuedraggable/dist/vuedraggable.umd.min.js"></script>
    <style>
      body {
        margin: 0;
      }
      #app {
        width: 100vw;
        height: 100vh;
      }
      .canvas-box {
        background-color: aquamarine;
      }
      .color-card {
        width: 1500px;
        display: flex;
        flex-wrap: wrap;
      }
      .color-item {
        width: 32px;
        height: 32px;
        border-radius: 50%;
      }
    </style>
  </head>

  <body>
    <div id="app">
      <el-row>
        <el-col :span="1">
          <el-upload accept="image/png, image/jpeg" action="null" :limit="1" :on-change="onChange">
            <el-button size="small" type="primary">点击上传</el-button>
          </el-upload>
        </el-col>
        <el-col :span="canvasWidth/100*2">
          <canvas id="imgBeforeCanvas" class="canvas-box" :style="{width:canvasWidth,height:canvasHeight}" :width="canvasWidth" :height="canvasHeight"> </canvas>
        </el-col>
        <el-col :span="canvasWidth/100*2">
          <canvas id="imgAfterCanvas" class="canvas-box" :style="{width:canvasWidth,height:canvasHeight}" :width="canvasWidth" :height="canvasHeight"> </canvas>
        </el-col>
        <el-col :span="canvasWidth/100*2">
          <canvas id="imgAfterCanvas_1" class="canvas-box" :style="{width:canvasWidth,height:canvasHeight}" :width="canvasWidth" :height="canvasHeight"> </canvas>
        </el-col>
      </el-row>
      <span>原</span>
      <canvas id="imgAfterCanvas__0" class="canvas-box" :style="{width:canvasWidth*2,height:canvasHeight*2}" :width="canvasWidth*2" :height="canvasHeight*2"> </canvas>
      <span>主1</span>
      <canvas id="imgAfterCanvas__4" class="canvas-box" :style="{width:canvasWidth*2,height:canvasHeight*2}" :width="canvasWidth*2" :height="canvasHeight*2"> </canvas>
      <span>1</span>
      <canvas id="imgAfterCanvas__1" class="canvas-box" :style="{width:canvasWidth*2,height:canvasHeight*2}" :width="canvasWidth*2" :height="canvasHeight*2"> </canvas>
      <span>混</span>
      <canvas id="imgAfterCanvas__3" class="canvas-box" :style="{width:canvasWidth*2,height:canvasHeight*2}" :width="canvasWidth*2" :height="canvasHeight*2"> </canvas>
      <span>2</span>
      <canvas id="imgAfterCanvas__2" class="canvas-box" :style="{width:canvasWidth*2,height:canvasHeight*2}" :width="canvasWidth*2" :height="canvasHeight*2"> </canvas>
      <div class="color-card">
        <div v-for="item in colorList" :key="item" class="color-item" :style="{backgroundColor: `${getHexColor(`rgba(${item[0]},${item[1]},${item[2]},255)`)}`}"></div>
      </div>
    </div>
  </body>

  <script>
    function getBase64(file) {
      const reader = new FileReader()
      reader.readAsDataURL(file)
      return new Promise((resolve) => {
        reader.addEventListener("load", () => resolve(reader.result))
      })
    }
    function getImageData(imgBeforeCanvas, url, imgAfterCanvas__0) {
      const ctx = imgBeforeCanvas.getContext("2d") // 设置在画布上绘图的环境
      const ctx_0 = imgAfterCanvas__0.getContext("2d") // 设置在画布上绘图的环境
      const image = new Image()
      image.src = url

      const w = imgBeforeCanvas.width
      const h = imgBeforeCanvas.height
      const w_0 = imgAfterCanvas__0.width
      const h_0 = imgAfterCanvas__0.height
      return new Promise((resolve) => {
        image.onload = function () {
          ctx.drawImage(image, 0, 0, w, h) // 将图片绘制到画布上
          ctx_0.drawImage(image, 0, 0, w_0, h_0) // 将图片绘制到画布上
          const imgData = ctx.getImageData(0, 0, w, h) // 获取画布上的图像像素
          resolve(imgData.data) // 获取到的数据为一维数组,包含图像的RGBA四个通道数据
        }
      })
    }
    function drawImage(dom, data) {
      const ctx = dom.getContext("2d")
      const matrix_obj = ctx.createImageData(dom.width, dom.height)
      matrix_obj.data.set(data)
      ctx.putImageData(matrix_obj, 0, 0)
    }
    function d1tod3(data, width, height) {
      const list = []
      const result = []
      const len = Math.ceil(data.length / 4)
      // 将每一个像素点的rgba四个值组合在一起
      for (let i = 0; i < len; i++) {
        const start = i * 4
        list.push([data[start], data[start + 1], data[start + 2], data[start + 3]])
      }
      //根据图形的宽和高将数据进行分类
      for (let hh = 0; hh < height; hh++) {
        const tmp = []
        for (let ww = 0; ww < width; ww++) {
          tmp.push(list[hh * width + ww])
        }
        result.push(tmp)
      }
      return result
    }
    function d3tod1(data) {
      const result = []
      for (let i = 0; i < data.length; i++) {
        for (let j = 0; j < data[i].length; j++) {
          result.push(data[i][j][0], data[i][j][1], data[i][j][2], data[i][j][3])
        }
      }
      return result
    }
    function colourDistanceLAB(rgb_1, rgb_2) {
      let [R_1, G_1, B_1] = rgb_1
      let [R_2, G_2, B_2] = rgb_2
      let rmean = (R_1 + R_2) / 2
      let R = R_1 - R_2
      let G = G_1 - G_2
      let B = B_1 - B_2
      return Math.sqrt((2 + rmean / 256) * R ** 2 + 4 * G ** 2 + (2 + (255 - rmean) / 256) * B ** 2)
    }
    function findNearestColorOne(color, colorList) {
      let result = []
      let d = Infinity
      colorList.forEach((item) => {
        let d_ = colourDistanceLAB(item, color)
        if (d_ < d) {
          d = d_
          result = [...item]
        }
      })
      return result
    }
    function findNearestColorTwo(color, colorList) {
      let result1 = []
      let d1 = Infinity
      let result2 = []
      let d2 = Infinity
      colorList.forEach((item) => {
        let d_ = colourDistanceLAB(item, color)
        if (d_ < d1) {
          d2 = d1
          result2 = [...result1]
          d1 = d_
          result1 = [...item]
        } else if (d_ < d2) {
          d2 = d_
          result2 = [...item]
        }
      })
      return [result1, result2]
    }
    function getHexColor(color) {
      var values = color
        .replace(/rgba?\(/, "")
        .replace(/\)/, "")
        .replace(/[\s+]/g, "")
        .split(",")
      var a = parseFloat(values[3] || 1),
        r = Math.floor(a * parseInt(values[0]) + (1 - a) * 255),
        g = Math.floor(a * parseInt(values[1]) + (1 - a) * 255),
        b = Math.floor(a * parseInt(values[2]) + (1 - a) * 255)
      return "#" + ("0" + r.toString(16)).slice(-2) + ("0" + g.toString(16)).slice(-2) + ("0" + b.toString(16)).slice(-2)
    }
    const colorList = [
      [193, 195, 192],
      [195, 183, 13],
      [213, 185, 59],
      [216, 186, 0],
      [141, 120, 31],
      [211, 109, 0],
      [215, 134, 52],
      [206, 155, 76],
      [208, 87, 1],
      [206, 151, 0],
      [209, 127, 0],
      [221, 73, 3],
      [211, 44, 2],
      [201, 21, 0],
      [190, 5, 2],
      [130, 15, 22],
      [82, 21, 16],
      [62, 27, 21],
      [240, 188, 201],
      [249, 175, 198],
      [240, 114, 198],
      [251, 137, 195],
      [226, 59, 109],
      [249, 90, 94],
      [241, 96, 111],
      [214, 34, 46],
      [65, 46, 31],
      [137, 191, 226],
      [213, 169, 218],
      [130, 61, 162],
      [47, 60, 169],
      [113, 59, 85],
      [142, 145, 138],
      [107, 107, 99],
      [37, 44, 60],
      [20, 24, 23],
      [241, 190, 161],
      [248, 194, 166],
      [248, 174, 147],
      [215, 185, 149],
      [177, 126, 165],
      [120, 78, 38],
      [88, 58, 30],
      [125, 91, 53],
      [108, 79, 37],
      [212, 233, 69],
      [228, 235, 140],
      [197, 241, 182],
      [133, 237, 168],
      [140, 235, 107],
      [150, 230, 81],
      [80, 216, 76],
      [7, 186, 130],
      [41, 131, 37],
      [99, 162, 30],
      [0, 162, 42],
      [3, 118, 94],
      [19, 59, 58],
      [83, 117, 43],
      [15, 87, 42],
      [31, 54, 32],
      [2, 73, 161],
      [32, 41, 108],
      [101, 209, 222],
      [59, 155, 176],
      [30, 128, 215],
      [56, 193, 206],
      [0, 147, 161],
      [97, 195, 240],
      [78, 178, 237],
      [0, 80, 179],
      [29, 152, 222],

    //   [255, 255, 255],
    //   [250, 245, 242],
    //   [209, 183, 160],
    //   [112, 77, 66],
    //   [184, 136, 116]
    ]

    const vm = new Vue({
      el: "#app",
      data: {
        colorList,
        imgbase64: "",
        canvasWidth: 100,
        canvasHeight: 100,
        d3Data: null
      },
      computed: {},
      methods: {
        async onChange(file) {
          //   console.log("file", file)
          this.imgbase64 = await getBase64(file.raw)
          //   console.log("imgbase64", this.imgbase64)

          //   将图像绘制到canvas并获取图像数据
          const imgBeforeCanvas = document.getElementById("imgBeforeCanvas") // canvas画布
          const imgAfterCanvas__0 = document.getElementById("imgAfterCanvas__0") // canvas画布
          const w = imgBeforeCanvas.width
          const h = imgBeforeCanvas.height
          let data = await getImageData(imgBeforeCanvas, this.imgbase64, imgAfterCanvas__0)
          //   console.log("data", data)

          //   将数据转为高维数组
          let d3Data = d1tod3(data, w, h)
          this.d3Data = d3Data
          //   console.log("d3Data", d3Data)

          //   处理图像数据
          //   就近单值映射
          let d3DataMapOne = JSON.parse(JSON.stringify(d3Data))
          let d3DataMapOne_1 = JSON.parse(JSON.stringify(d3Data))
          d3Data.forEach((row, i) => {
            row.forEach((item, j) => {
              let [res1, res2] = findNearestColorTwo(item, colorList)
              d3DataMapOne[i][j] = [...res1, 255]
              d3DataMapOne_1[i][j] = [...res2, 255]
            })
          })
          //   console.log("d3DataMapOne", d3DataMapOne)

          //   就近2值映射
          let d3DataMapTwo1 = JSON.parse(JSON.stringify(d3Data))
          let d3DataMapTwo2 = JSON.parse(JSON.stringify(d3Data))
          let d3DataMapTwo3 = JSON.parse(JSON.stringify(d3Data))
          let d3DataMapTwo4 = JSON.parse(JSON.stringify(d3Data))
          d3Data.forEach((row, i) => {
            row.forEach((item, j) => {
              let [res1, res2] = findNearestColorTwo(item, colorList)
              d3DataMapTwo1[i][j] = [...res1, 255]
              d3DataMapTwo2[i][j] = [...res2, 255]
            })
          })
          let d1Data__1 = []
          let d1Data__2 = []
          let d1Data__3 = []
          let d1Data__4 = []
          for (let i = 0; i < this.canvasWidth; i++) {
            for (let j = 0; j < this.canvasHeight; j++) {
              d1Data__1.push(...d3DataMapTwo1[i][j], ...d3DataMapTwo1[i][j])
              d1Data__2.push(...d3DataMapTwo2[i][j], ...d3DataMapTwo2[i][j])
              d1Data__3.push(...d3DataMapTwo1[i][j], ...d3DataMapTwo2[i][j])
              d1Data__4.push(...d3DataMapTwo1[i][j], ...d3DataMapTwo1[i][j])
            }
            for (let j = 0; j < this.canvasHeight; j++) {
              d1Data__1.push(...d3DataMapTwo1[i][j], ...d3DataMapTwo1[i][j])
              d1Data__2.push(...d3DataMapTwo2[i][j], ...d3DataMapTwo2[i][j])
              d1Data__3.push(...d3DataMapTwo2[i][j], ...d3DataMapTwo1[i][j])
              d1Data__4.push(...d3DataMapTwo1[i][j], ...d3DataMapTwo2[i][j])
            }
          }
          //   console.log("d1Data__1", d1Data__1)

          //   将高维数组转为一维数组
          let d1Data = d3tod1(d3DataMapOne)
          let d1Data_1 = d3tod1(d3DataMapOne_1)
          //   console.log("d1Data", d1Data)

          //   将处理后的数据绘制到imgAfterCanvas
          //   const imgAfterCanvas = document.getElementById("imgAfterCanvas") // canvas画布
          //   drawImage(imgAfterCanvas, d1Data)
          //   const imgAfterCanvas_1 = document.getElementById("imgAfterCanvas_1") // canvas画布
          //   drawImage(imgAfterCanvas_1, d1Data_1)
          const imgAfterCanvas__1 = document.getElementById("imgAfterCanvas__1") // canvas画布
          drawImage(imgAfterCanvas__1, d1Data__1)
          const imgAfterCanvas__2 = document.getElementById("imgAfterCanvas__2") // canvas画布
          drawImage(imgAfterCanvas__2, d1Data__2)
          const imgAfterCanvas__3 = document.getElementById("imgAfterCanvas__3") // canvas画布
          drawImage(imgAfterCanvas__3, d1Data__3)
          const imgAfterCanvas__4 = document.getElementById("imgAfterCanvas__4") // canvas画布
          drawImage(imgAfterCanvas__4, d1Data__4)
        }
      }
    })
  </script>
</html>
qq_38736186
关注
透明颜色混合算法
A.A的博客
07-07 5751
一般数学计算中，颜色取值是：R,G,B∈[0,255],A∈[0,1]R,G,B∈[0,255],A∈[0,1] R,G,B \in \left [ 0, 255 \right ], A\in \left [ 0, 1 \right ] 所以对于一般的颜色混合有：Color(RGBA)=Color(R1G1B1A1)+Color(R2G2B2A2)Color(RGBA)=Color(R1G1B...
glsl颜色混合算法
yvhkyiu的专栏
09-10 3456
multiply: result = base * blend; screen: result = vec4(1.0) - ((vec4(1.0) - blend) * (vec4(1.0) - base)); darken: result = min( blend, base );
Android图片颜色混合算法
轮子初级玩家
12-07 1853
最近写的工程其中有一步是是把两张图片根据透明度混合起来生成一张新的图片，我也完成了这个功能。原来其实比较简单，把两张图片分为顶部图片和顶部图片，取顶部图片每像素的透明度为k，那么底部每像素的透明度则需要设定为（1-k）使得加起来百分比为1。然后分割像素为红绿蓝通道，然后分别乘以对应对应的透明度再加起来成为新的红绿蓝通道，然后把红绿蓝值通过移位运算合成新像素即可。 代码如下（默认像素编码为ARGB...
RIP颜色混合算法
jgzsygg的博客
08-16 421
资源： http://blog.csdn.net/cmlxiaogeaaa/article/details/52650997
【Unity】颜色混合计算
我是香菜
05-28 1304
在图形渲染中，颜色混合（Color Blending）是指将多个颜色值组合在一起以生成最终显示的颜色。颜色混合技术广泛用于处理半透明效果、光照效果和后期处理效果。
rgba的颜色混合
yangmeiling413的博客
12-09 586
rgba转rgb
Opengl混合算法探究
weixin_41191739的博客
12-07 400
在我们的实际应用中使用OpenGL进行混合常见的问题有以下三种： 使用Opengl自带的混合算法 自定义混合算法 半透明混合 针对以上三种情况我们具体分析有何不同及如何解决问题。 一、Opengl自带混合算法 OpenGL渲染管线的最后阶段会将源色和底色进行混合，我们大部分情况下只需考虑实现此次drawcall的渲染实现即可，无心过分操心如何与底色进行混合。那么如何使用自带的混合呢？ 首先我们需要开启混合模式，开启混合模式之后即可使用OpenGL自带的混合算法。 glEnable(GL_BLEND);
Photoshop图层混合算法
studyeboy的专栏
01-22 1764
Photoshop中图层面板右上角的混合模式，及分类。 基色：图像中原稿颜色，对应Photoshop中 当前图层下方的颜色。文中用A表示。 混合色：通过绘图或编辑工具应用的颜色，对应Photoshop中当前图层的颜色。文中用B表示，文中混合色值均为（128，128, 128）。 结果色：混合后得到的颜色，对应Photoshop中使用模式之后出现的混合图层的颜色。文中用C表示。 图层的透明度： 蒙版图层中给定位置图层的亮度（d=颜色值/255），文中用d表示。 基础模式 利用图层的不透明度及图像填充值来
公式宝典之颜色混合模式公式
酷酷宝哥的博客
10-10 6237
正常模式（Normal） 是默认的状态，其最终色和绘图色相同。可通过改变画笔工具选项栏中的“不透明度”来设定不同的透明度。当图像的颜色模式是“位图”或“索引颜色”时，“正常”模式就变成“阈值”模式。 在基色存在透明度a%时，混合的运算方式是：最终色=基色*a% + 混合色*（1-a%）。 溶解模式(Dissolve) 最终色和绘图色相同，只是根据每个像素
js实现颜色混合
weixin_43837268的博客
08-16 2326
const colourBlend = (c1, c2, ratio) => { ratio = Math.max(Math.min(Number(ratio), 1), 0) let r1 = parseInt(c1.substring(1, 3), 16) let g1 = parseInt(c1.substring(3, 5), 16) let b1 ...
颜色混合模型
03-16
以描述中提到的`yansehunhe1.cpp`为例，这可能是一个包含实现颜色混合算法的C++源代码文件。通常，这样的代码会包含对OpenGL函数的调用，比如设置混合函数、启用混合以及可能的顶点着色器和片段着色器程序，以控制...
简单的颜色混合器 iOS
04-06
作者christianhatch，源码colormix，Colormix 是简单的颜色混合器，允许你看到 RGB 和 HSL 颜色空间是如何交互的。
基于混合色彩空间的分块颜色特征提取算法
01-27
针对上述不足,提出了一种基于混合色彩空间分块颜色特征提取算法,并将所提取的颜色特征与纹理特征相结合,用于图像的分类识别中。实验结果证明:无论是国画还是普通图像,分类识别过程中,本文算法相比普通的单一色彩空间...
EM算法图像分割：用高斯混合模型实现EM算法并将其应用于图像分割-matlab开发
06-01
在图像处理领域，EM算法常常被用来进行图像分割，尤其是在高斯混合模型（GMM，Gaussian Mixture Model）的基础上。EM算法的主要优势在于它能够处理不完整的数据，即对于某些观测值，我们可能不知道其对应的类别，但...
STL set
最新发布
hls0611的博客
11-09 200
练习题：P1059 [NOIP2006 普及组] 明明的随机数。
100种算法【Python版】第51篇——希尔排序
AnFany
11-06 276
100种算法【Python版】第51篇——希尔排序
【LeetCode】【算法】160.相交链表
passer__jw767的博客
11-05 355
Leetcode 160. 相交链表
【算法】（Python）贪心算法
yannan20190313的博客
11-04 2052
【算法】（Python）贪心算法（最大单元数，买卖股票最佳时机，最低加油次数）
源码分享：4.9版本颜色混合算法编程实现
此源码包包含了一系列设计用于实现、演示和研究颜色混合算法的编程代码。颜色混合是计算机图形学中一个重要的概念，它允许我们通过组合不同的颜色生成新的颜色。该技术在图像处理、游戏开发、网页设计、动画制作等...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值