国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

利用 Canvas 將白色背景的 JPEG 圖片轉(zhuǎn)成透明的 PNG 圖片

cgh1999520 / 2699人閱讀

摘要:此腳本的功能是將格式的圖片中的白色背景轉(zhuǎn)成透明,然后再保存成格式的圖片如果圖片本身有不想被轉(zhuǎn)換的白色區(qū)域,使用其他方法吧。所以說如果我們想實(shí)現(xiàn)白色背景的圖片轉(zhuǎn)成透明的圖片,只需要將白色背景對應(yīng)的像素點(diǎn)得值變成就好了。

作者 @zwhu
源碼 @raw
原文章 @github

使用場景

老板讓我這個不會P圖的偽前端把公司的Logo放到公司網(wǎng)站上,結(jié)果給了我一張 JPEG 格式的圖片,作為一個有追求的碼農(nóng),怎么能現(xiàn)學(xué) ps,于是利用一點(diǎn)HTML5+NODE的知識寫了個轉(zhuǎn)換的腳本。

此腳本的功能是將 JPEG 格式的圖片中的白色背景轉(zhuǎn)成透明,然后再保存成PNG格式的圖片;如果圖片本身有不想被轉(zhuǎn)換的白色區(qū)域,使用其他方法吧。

實(shí)現(xiàn)原理

原理很簡單,只有兩點(diǎn):

RGBA

RGBA的解釋 我們知道圖片由很多個像素點(diǎn)組成的,每個像素點(diǎn)都有顏色,而顏色是由三基色RGB構(gòu)成。而A是Alpha通道,用作不透明度參數(shù),0%為完全透明,100%是完全不透明。所以說如果我們想實(shí)現(xiàn)白色背景的JPEG 圖片轉(zhuǎn)成透明的 PNG 圖片,只需要將白色背景對應(yīng)的像素點(diǎn)得Alpha值變成0就好了。

canvas

HTML5新增加了canvas,可以用來繪制圖形,也可以對圖片的像素進(jìn)行操作。通過 getImageData() 方法可以返回原始的像素信息 ImageData 對象。ImageData 對象中的像素是可寫的(由 RGBA 組成),因此我們可以修改像素的Alpha通道值,然后再通過 putImageData() 方法將這些像素復(fù)制到畫布中。

部分代碼

有了上面的知識,我們可以很輕松的通過查 canvas 的 API 來寫出轉(zhuǎn)換的代碼(ES6),代碼在下面,代碼不難,也寫了很詳細(xì)的注釋,雖然我是用 node-canvas 實(shí)現(xiàn)的,但是改成瀏覽器版本的話,也不需要幾行代碼,原理是想通的:

import Canvas  from "canvas"
import fs from "fs"

const Image = Canvas.Image

// 初始化 img 和 start time
// 獲取命令行輸入的源圖片和保存的圖片地址
let img = new Image
  , start = new Date()
  , rawPath =  process.argv[2]
  , savePath = process.argv[3]

// 在命令行中沒有輸入圖片地址,拋錯
if(!rawPath)
  throw new Error("input raw image path")

if(!savePath)
  throw new Error("input save image path")

img.onerror = function(err){
  throw err
}

// 圖片加載完成
img.onload = function(){
    //    獲取圖片的width和height
  let width = img.width
    , height = img.height
    , canvas = new Canvas(width, height)
    , ctx = canvas.getContext("2d")

  // 將源圖片復(fù)制到畫布上
  // canvas 所有的操作都是在 context 上,所以要先將圖片放到畫布上才能操作
  ctx.drawImage(img, 0, 0, width, height)

  let imageData = ctx.getImageData(0, 0, width, height)
  
  // 獲取畫布的像素信息
  // 是一個一維數(shù)組,包含以 RGBA 順序的數(shù)據(jù),數(shù)據(jù)使用  0 至 255(包含)的整數(shù)表示
  // 如:圖片由兩個像素構(gòu)成,一個像素是白色,一個像素是黑色,那么 data 為
  // [255,255,255,255,0,0,0,255] 
  // 這個一維數(shù)組可以看成是兩個像素中RBGA通道的數(shù)組的集合即:
  // [R,G,B,A].concat([R,G,B,A])
    , data = imageData.data

 // 對像素集合中的單個像素進(jìn)行循環(huán),每個像素是由4個通道組成,所以 i=i+4
  for(let i = 0; i < data.length; i+=4) {
      // 得到 RGBA 通道的值
    let r = data[i]
      , g = data[i+1]
      , b = data[i+2]

    // 我們從最下面那張顏色生成器中可以看到在圖片的右上角區(qū)域,有一小塊在
    // 肉眼的觀察下基本都是白色的,所以我在這里把 RGB 值都在 245 以上的
    // 的定義為白色
    // 大家也可以自己定義的更精確,或者更寬泛一些
    if([r,g,b].every(v => v < 256 && v > 245)) data[i+3] = 0
  }
  
  // 將修改后的代碼復(fù)制回畫布中
  ctx.putImageData(imageData, 0, 0)

  // 將修改后的圖片保存
  let out = fs.createWriteStream(`${__dirname}/${savePath}`)
    , stream = canvas.pngStream()

  stream.on("data", function (chunk) {
    out.write(chunk)
  })

  stream.on("end", function () {
    console.log(`保存到 ${__dirname}/${savePath}`)
    console.log(`耗時: ${new Date()-start}ms`)
  })
}

img.src = `${__dirname}/${rawpath}`

文章版權(quán)歸作者所有,未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址:http://specialneedsforspecialkids.com/yun/85967.html

相關(guān)文章

  • 前端圖像處理指南

    摘要:本文會介紹位圖處理,矢量圖和圖像處理,重點(diǎn)是,并且最后會附上一個小應(yīng)用。以上列舉部分,更多備胎在此矢量圖處理講完位圖再說矢量圖。矢量圖在繪制圖標(biāo)商業(yè)動畫元素上應(yīng)用非常廣范。 計算機(jī)圖像處理是一門很成熟的技術(shù),任何一門可操作系統(tǒng)接口的語言都能很輕易的實(shí)現(xiàn)各種處理操作。但是前端限于瀏覽器環(huán)境和接口限制,處理起來會有諸多不便,這里所說的前端圖像處理,是真的指不借助任何后端服務(wù)純前端實(shí)現(xiàn)的圖像...

    CatalpaFlat 評論0 收藏0
  • 前端圖像處理指南

    摘要:本文會介紹位圖處理,矢量圖和圖像處理,重點(diǎn)是,并且最后會附上一個小應(yīng)用。以上列舉部分,更多備胎在此矢量圖處理講完位圖再說矢量圖。矢量圖在繪制圖標(biāo)商業(yè)動畫元素上應(yīng)用非常廣范。 計算機(jī)圖像處理是一門很成熟的技術(shù),任何一門可操作系統(tǒng)接口的語言都能很輕易的實(shí)現(xiàn)各種處理操作。但是前端限于瀏覽器環(huán)境和接口限制,處理起來會有諸多不便,這里所說的前端圖像處理,是真的指不借助任何后端服務(wù)純前端實(shí)現(xiàn)的圖像...

    Anshiii 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<