js 簡單卡通濾鏡

 

原文鏈接: js 簡單卡通濾鏡

上一篇: node 使用命令行運行esm腳本

下一篇: tsdx 循環依賴導致import爲空

 

比原作對比度稍微淡了一點

主要是將opencv的代碼使用js和gl實現

https://juejin.cn/post/6941000216761860127

 

主要代碼如下, 將灰度圖片中邊緣增強, 模擬畫筆的邊緣, 使用模糊將細節和離散點融合, 漫畫中有很多大的色塊, 最後在原圖上增加亮度, 提升色彩

    #讀取圖片
    img_rgb=cv2.imread(imgI_filename)
    
    #轉換爲灰度圖片
    img_gray = cv2.cvtColor(img_rgb,cv2.COLOR_RGB2GRAY)
    
    #增加模糊效果。值越大越模糊（取奇數）
    img_blur = cv2.medianBlur(img_gray,5)

    #檢測到邊緣並且增強其效果
    img_edge = cv2.adaptiveThreshold(img_blur,128,
        cv2.ADAPTIVE_THRESH_MEAN_C,
        cv2.THRESH_BINARY,
        blockSize=9,
        C=8)
        
    #彩色圖像轉灰度圖像
    img_edge = cv2.cvtColor(img_edge,cv2.COLOR_GRAY2BGR)
    
    #灰度圖像轉彩色圖像
    img_cartoon= cv2.bitwise_and(img_rgb,img_edge)
    
    #調整亮度和對比度
    res = np.uint8(np.clip((2.0*img_cartoon+16),0,255))
    
    #保存轉換後的圖片
    cv2.imwrite(imgO_filename,res)

 

 

邊緣提取前後都加了高斯模糊, 這樣能減少銳化

    const imageEdge = pipe(cloneImageData(data), [
      "grayscale",
      "bigGaussian",
      "canny",
      "bigGaussian",
    ]);

 

其他的都一樣, 不過這東西最好還是神經網絡來, 這種濾鏡不同的圖片表現太不一樣了

import pipe from '../utils/pipe';
import { Filter } from '../type';
import truncate from '../utils/truncate';
const cartoon: Filter = (pixels, amount = 125) => {
  const { width, height } = pixels;
  const imageEdge = pipe(pixels, [
    'grayscale',
    'bigGaussian',
    'canny',
    'bigGaussian',
  ]);
  const imageData = new ImageData(width, height);
  const outBuffer = imageData.data;
  const rawBuffer = pixels.data;
  const edgeBuffer = imageEdge.data;
  for (let i = 0; i < width * height * 4; i += 4) {
    outBuffer[i] = truncate(
      2 * (edgeBuffer[i] / 3 + rawBuffer[i] - amount) + amount
    );
    outBuffer[i + 1] = truncate(
      2 * (edgeBuffer[i + 1] / 3 + rawBuffer[i + 1] - amount) + amount
    );
    outBuffer[i + 2] = truncate(
      2 * (edgeBuffer[i + 2] / 3 + rawBuffer[i + 2] - amount) + amount
    );
    outBuffer[i + 3] = rawBuffer[i + 3];
  }
  return imageData;
};

export default cartoon;