图像

一个 Image 用于浏览器外的使用.

另外,还输出一些在Node.js和浏览器中可用并带有浏览器、Webpack等包装的辅助方法.

安装

npm install --save @canvas/image

使用量

const fs = require('fs')
const { Image, getImageData, imageFromBuffer, imageFromImageData } = require('@canvas/image')

// Traditional loading
const img = new Image()
img.src = 'image.png'
img.onload = () => {
  console.log(img.width)
  // => 2

  console.log(img.height)
  // => 1

  console.log(getImageData(img).data)
  // => Uint8ClampedArray [ 1, 2, 3, 4, 5, 6, 7, 8 ]
}

// From Buffer
const source = fs.readFileSync('image.png')
imageFromBuffer(source).then((img) => {
  console.log(img.width)
  // => 2

  console.log(img.height)
  // => 1

  console.log(getImageData(img).data)
  // => Uint8ClampedArray [ 1, 2, 3, 4, 5, 6, 7, 8 ]
})

// From ImageData
const data = new ImageData(new Uint8ClampedArray([1, 2, 3, 4, 5, 6, 7, 8]), 2, 1)
imageFromImageData(data).then((img) => {
  console.log(img.width)
  // => 2

  console.log(img.height)
  // => 1

  console.log(getImageData(img).data)
  // => Uint8ClampedArray [ 1, 2, 3, 4, 5, 6, 7, 8 ]
})

API 密码

getImageData(image)

• image (单位:千美元)Image,要求)
• 返回时 ImageData 或者说 undefined

imageFromBuffer(buffer)

• buffer (单位:千美元)Uint8Array,要求)
• 返回时 Promise<Image>

imageFromImageData(imageData)

• imageData (单位:千美元)ImageData,要求)
• 返回时 Promise<Image>

抢劫

测试是针对这一执行和克罗姆的执行,以确保我们的行为相同。 您可以通过构建测试捆绑在克罗姆进行测试(npm run build),旋转本地网络服务器,然后打开 test.html。 。 。 .