JS也能做图像处理 - 会员卡主题色提取的方案解析

function convertToPixelsArray(imgData) {  const data = imgData.data;  const pixels = [];  const [min, max] = [5, 250]; //像素点RGB值不在此范围内的进行过滤 范围可选  for (let i = 0; i < data.length; i += 4) {    const r = data[i];    const g = data[i + 1];    const b = data[i + 2];    // rgb值都在[5, 250]范围内，则不过滤    if (!(Math.min(r, g, b) >= max || Math.max(r, g, b) <= min)) {      // 过滤透明度（可选）      pixels.push([data[i], data[i + 1], data[i + 2]]);    }  }  return pixels;}

function medianCut(pixels) {  const colorRange = getColorRange(pixels);// 获取该颜色盒子的RGB范围  const colorBox = new ColorBox(colorRange, pixels.length, pixels);  const divisions = 8; // 最大切割次数，在demo中写死 实际项目中使用者可自定义  let [box1, box2] = cutBox(colorBox); // 第一次切割  return queueCut([box1, box2], divisions);}function queueCut(queue, num) {  let isSmallBox = false;  while (queue.length < num && !isSmallBox) {    const denselyBox = queue.shift();    const resultBox = cutBox(denselyBox);    // 只返回一个盒子时，说明最长边已经小于阀值    if (resultBox.length === 1) {      isSmallBox = true;      queue.unshift(resultBox);      return;    }    queue = insertValueInSortedArray(queue, resultBox); // 插值排序  }  return queue;}function cutBox(colorBox) {  const { colorRange, total, rgbArr } = colorBox;  const cutSide = colorBox.getCutSide(colorRange);  if (cutSide === -1) return colorBox; // 当切割边为-1即切割范围小于阀值时 停止切割  const colorInCutSide = rgbArr.map((item) => item[cutSide]); // 统计出各个值的数量  let medianColor = getMedianColor(colorInCutSide, total); // 此处做简易处理，实际处理中需考虑中位数值的像素数量是否过大  if (medianColor === colorRange[cutSide][0]) {    medianColor++;  } // 防止空切  const newRange = getCutRange(colorRange, cutSide, medianColor); // 获取切割后的两个盒子的RGB范围  const dividedPixels = dividePixel(rgbArr, cutSide, medianColor); // 分割像素到两个盒子中并返回...  return [boxOne, boxTwo];}