如何使用canvas處理圖像-創(chuàng)新互聯(lián)

如何使用canvas處理圖像？很多新手對(duì)此不是很清楚，為了幫助大家解決這個(gè)難題，下面小編將為大家詳細(xì)講解，有這方面需求的人可以來(lái)學(xué)習(xí)下，希望你能有所收獲。

成都創(chuàng)新互聯(lián)公司-云計(jì)算及IDC服務(wù)提供商，涵蓋公有云、IDC機(jī)房租用、香港機(jī)房服務(wù)器托管、等保安全、私有云建設(shè)等企業(yè)級(jí)互聯(lián)網(wǎng)基礎(chǔ)服務(wù)，聯(lián)系熱線：18980820575

canvas 的圖像處理能力通過(guò) ImageData 對(duì)象來(lái)處理像素?cái)?shù)據(jù)。主要的 API 如下：

• createImageData()：創(chuàng)建一個(gè)空白的 ImageData 對(duì)象

• getImageData()：獲取畫(huà)布像素?cái)?shù)據(jù)，每一個(gè)像素點(diǎn)有 4 個(gè)值 —— rgba

• putImageData()：將像素?cái)?shù)據(jù)寫(xiě)入畫(huà)布

imageData = {
  width: Number,
  height: Number,
  data: Uint8ClampedArray
}

width 是 canvas 畫(huà)布的寬或者說(shuō) x 軸的像素?cái)?shù)量；height 是畫(huà)布的高或者說(shuō) y 軸的像素?cái)?shù)量；data 是畫(huà)布的像素?cái)?shù)據(jù)數(shù)組，總長(zhǎng)度 w * h * 4，每 4 個(gè)值（rgba）代表一個(gè)像素。

對(duì)圖片的處理

下面，我們通過(guò)幾個(gè)例子來(lái)看下 canvas 基礎(chǔ)的圖片處理能力。

原圖效果：

const cvs = document.getElementById("canvas");
const ctx = cvs.getContext("2d");
const img = new Image();
img.src="圖片 URL";
img.onload = function () {
  ctx.drawImage(img, 0, 0, w, h);
}

底片/負(fù)片效果

算法：將 255 與像素點(diǎn)的 rgb 的差，作為當(dāng)前值。

function negative(x) {
  let y = 255 - x;
  return y;
}

效果圖：

const imageData =  ctx.getImageData(0, 0, w, h);
const { data } = imageData;
let l = data.length;
for(let i = 0; i < l; i+=4) {
  const r = data[i];
  const g = data[i + 1];
  const b = data[i + 2];
  data[i] = negative(r);
  data[i + 1] = negative(g);
  data[i + 2] = negative(b);
}
ctx.putImageData(imageData, 0, 0);

單色效果

單色效果就是保留當(dāng)前像素的 rgb 3個(gè)值中的一個(gè)，去除其他色值。

for(let i = 0; i < l; i+=4) { // 去除了 r 、g 的值
  data[i] = 0;
  data[i + 1] = 0;
}

效果圖：

灰度圖

灰度圖：每個(gè)像素只有一個(gè)色值的圖像。0 到 255 的色值，顏色由黑變白。

for(let i = 0; i < l; i+=4) {
  const r = data[i];
  const g = data[i + 1];
  const b = data[i + 2];
  const gray = grayFn(r, g, b);
  data[i] = gray;
  data[i + 1] = gray;
  data[i + 2] = gray;
}

算法1——平均法：

const gray = (r + g + b) / 3;

效果圖：

算法2——人眼感知：根據(jù)人眼對(duì)紅綠藍(lán)三色的感知程度：綠 > 紅 > 藍(lán)，給定權(quán)重劃分

const gray = r * 0.3 + g * 0.59 + b * 0.11

效果圖：

除此以外，還有：

取較大值或最小值。

const grayMax = Math.max(r, g, b); // 值偏大，較亮
const grayMin = Math.min(r, g, b); // 值偏小，較暗

取單一通道，即 rgb 3個(gè)值中的一個(gè)。

 二值圖

算法：確定一個(gè)色值，比較當(dāng)前的 rgb 值，大于這個(gè)值顯示黑色，否則顯示白色。

for(let i = 0; i < l; i+=4) {
  const r = data[i];
  const g = data[i + 1];
  const b = data[i + 2];
  const gray = gray1(r, g, b);
  const binary = gray > 126 ? 255 : 0;
  data[i] = binary;
  data[i + 1] = binary;
  data[i + 2] = binary;
}

效果圖：

高斯模糊

高斯模糊是“模糊”算法中的一種，每個(gè)像素的值都是周圍相鄰像素值的加權(quán)平均。原始像素的值有較大的高斯分布值（有較大的權(quán)重），相鄰像素隨著距離原始像素越來(lái)越遠(yuǎn)，權(quán)重也越來(lái)越小。

一階公式：

（使用一階公式是因?yàn)橐浑A公式的算法比較簡(jiǎn)單）

const radius = 5; // 模糊半徑
const weightMatrix = generateWeightMatrix(radius); // 權(quán)重矩陣
for(let y = 0; y < h; y++) {
  for(let x = 0; x < w; x++) {
    let [r, g, b] = [0, 0, 0];
    let sum = 0;
    let k = (y * w + x) * 4;
    for(let i = -radius; i <= radius; i++) {
      let x1 = x + i;
      if(x1 >= 0 && x1 < w) {
      let j = (y * w + x1) * 4;
      r += data[j] * weightMatrix[i + radius];
      g += data[j + 1] * weightMatrix[i + radius];
      b += data[j + 2] * weightMatrix[i + radius];
      sum += weightMatrix[i + radius];
      }
    }
    data[k] = r / sum;
    data[k + 1] = g / sum;
    data[k + 2] = b / sum;
  }
}
for(let x = 0; x < w; x++) {
  for(let y = 0; y < h; y++) {
    let [r, g, b] = [0, 0, 0];
    let sum = 0;
    let k = (y * w + x) * 4;
    for(let i = -radius; i <= radius; i++) {
      let y1 = y + i;
      if(y1 >= 0 && y1 < h) {
        let j = (y1 * w + x) * 4;
        r += data[j] * weightMatrix[i + radius];
        g += data[j + 1] * weightMatrix[i + radius];
        b += data[j + 2] * weightMatrix[i + radius];
        sum += weightMatrix[i + radius];
      }
    }
    data[k] = r / sum;
    data[k + 1] = g / sum;
    data[k + 2] = b / sum;
  }
}
function generateWeightMatrix(radius = 1, sigma) { // sigma 正態(tài)分布的標(biāo)準(zhǔn)偏差
  const a = 1 / (Math.sqrt(2 * Math.PI) * sigma);
  const b = - 1 / (2 * Math.pow(sigma, 2));
  let weight, weightSum = 0, weightMatrix = [];
  for (let i = -radius; i <= radius; i++){
    weight = a * Math.exp(b * Math.pow(i, 2));
    weightMatrix.push(weight);
    weightSum += weight;
  }
  return weightMatrix.map(item => item / weightSum); // 歸一處理
}

效果圖：

其他效果

這里再簡(jiǎn)單介紹下其他的圖像效果處理，因?yàn)槔雍?jiǎn)單重復(fù)，所以不再給出代碼和效果圖。

• 亮度調(diào)整：將 rgb 值，分別加上一個(gè)給定值。

• 透明化處理：改變 rgba 值中的 a 值。

• 對(duì)比度增強(qiáng)：將 rgb 值分別乘以 2，然后再減去一個(gè)給定值。

看完上述內(nèi)容是否對(duì)您有幫助呢？如果還想對(duì)相關(guān)知識(shí)有進(jìn)一步的了解或閱讀更多相關(guān)文章，請(qǐng)關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝您對(duì)創(chuàng)新互聯(lián)網(wǎng)站建設(shè)公司，的支持。

本文題目：如何使用canvas處理圖像-創(chuàng)新互聯(lián)
網(wǎng)站路徑：http://bm7419.com/article20/gipjo.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供面包屑導(dǎo)航、手機(jī)網(wǎng)站建設(shè)、標(biāo)簽優(yōu)化、關(guān)鍵詞優(yōu)化、App設(shè)計(jì)、網(wǎng)站制作

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)