https://github.com/hlerenow/imgtopixel

Convert image to pixel value, Run only in the browser. https://hlerenow.github.io/imgToPixel/
https://github.com/hlerenow/imgtopixel

img pixel

Last synced: 2 months ago
JSON representation

Convert image to pixel value, Run only in the browser. https://hlerenow.github.io/imgToPixel/

• Host: GitHub
• URL: https://github.com/hlerenow/imgtopixel
• Owner: hlerenow
• License: mit
• Created: 2018-12-17T07:57:14.000Z (over 6 years ago)
• Default Branch: master
• Last Pushed: 2020-06-09T11:44:07.000Z (almost 5 years ago)
• Last Synced: 2025-03-07T06:17:06.825Z (3 months ago)
• Topics: img, pixel
• Language: JavaScript
• Homepage:
• Size: 332 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
[![license](https://img.shields.io/github/license/mashape/apistatus.svg)]()

[![Version](https://img.shields.io/npm/v/imgtopixel.svg)](https://www.npmjs.com/package/imgtopixel)

[![npm](https://img.shields.io/npm/dt/imgtopixel.svg)](https://www.npmjs.com/package/imgtopixel)

# ImageToPixel

Convert image to pixel value, Run only in the browser

## [Demo](https://hlerenow.github.io/imgToPixel/example/)

## Installation

```

npm install imgtopixel --save

```

## Usage

```html

  

    

    

    ImgToPixel

  

  

      

      

  

```

```javascript

import ImgToPixel from 'imgtopixel'

let canvas = document.getElementById('domCanvas')

let canvasCtx = canvas.getContext('2d')

let globalImg = document.getElementById('img')

let globalImgHandle = null

// url 加载方式

ImgToPixel.getImgObjByUrl('http://statics.h-five.com/withme.jpg', function(img) {

  let imgSize = getImgDomSize()

  let handle = new ImgToPixel({

    imgObj: img,

    width: imgSize.w,

    height: imgSize.h

  })

  handle.forEach(ImgToPixel.EffectFunction.Gray)

  // 图片太大时 采用异步处理

  handle.forEachAsync(ImgToPixel.EffectFunction.Gray, 1000)

    .then(() => {

      let base64Img = handle.toBase64()

    })

  let base64Img = handle.toBase64()

})

// 图片文件的方式加载

let fileBox = document.getElementById('fileBox')

fileBox.addEventListener('change', function(evt) {

  let file = evt.target.files[0]

  let img = ImgToPixel.getImgObjByFile(file).then((data) => {

    img = data

    updateSourceImg(img)

    ImgToPixel.getImgObjByUrl(img, function(img) {

      let imgSize = getImgDomSize()

      let handle = new ImgToPixel({

        imgObj: img,

        width: imgSize.w,

        height: imgSize.h

      })

      globalImgHandle = handle

      handle.forEach(ImgToPixel.EffectFunction.Gray)

      // 图片太大时 采用异步处理

      handle.forEachAsync(ImgToPixel.EffectFunction.Gray, 1000)

        .then(() => {

          let base64Img = handle.toBase64()

        })

      let base64Img = handle.toBase64()

    })

  })

})

function getImgDomSize() {

  let style = getComputedStyle(globalImg, null)

  let w = parseInt(style.width)

  let h = parseInt(style.height)

  return {

    w: w,

    h: h

  }

}

```