camera-h5 v3.0.2

Camera-H5

Camera-H5 是一个手机拍照的库。直接调用系统相机，并提供翻转、压缩等处理功能。

DEMO: 参考代码 /demo 目录

2.x版本文档：参考 README-2.x.md

安装

npm install camera-h5 -save

或者直接引入文件

<script src="./dist/camera.js"></script>

快速使用指引

<div class="btn" id="J_Camera">Camera</div>

import Camera from 'camera-h5'

// 选择新文件并处理后触发
const onChanged = (err, base64, file) => {
  if (err) {
    console.log(err)
    return
  }
  console.log('Output:', base64)
}
// 选择新文件时触发
const onChange = (e) => {
  console.log('Input Event:', e)
}

const el = document.querySelector('#J_Camera')

el.addEventListener('click', () => {
  new Camera({ type: supportTypes, change: onChange, changed: onChanged })
})

语法

new Camera(options)

• 参数:
  • options 配置选项对象

options.onChanged 详解

• 参数为 (err, base64, file)

全局方法

Camera.getSize(base64)

获取图片尺寸大小。

• 参数:
  • base64 图片的 base64 值
  • 返回值: 图片的大小，单位 B

Camera.getImgInfo(base64, callback)

通过图片的 base64，获取图片的基本信息。

• 参数:
  • base64 图片的 base64 值
  • callback 参数为 (err, imgInfo)
• 返回值: undefined

Camera.compress(base64, options, callback)

通过图片的 base64，进行压缩图片。最终输出为 jpg 格式（可修改）。

推荐在任何情况下都压缩一下。

• 参数:
  • base64 图片的 base64 值
  • options 压缩配置
  • callback 参数为 (err, compressedImgInfo)
• 返回值: undefined

Camera.rotate(file, callback, config)

根据图片方向旋转图片操作。

注意：图片旋转后，图片大小会变大。故先进行图片旋转，在进行压缩操作。

• 参数:
  • file 图片文件，可以在 Camera.prototype.callback 的 onChanged 回调中获取
  • callback 参数为 (err, base64)
  • config 支持：auto 自动判断当前浏览器是否自动旋转（默认 false）；type 旋转后图片格式（默认 image/jpeg）；quality 图片质量（默认 90）
• 返回值: undefined

Camera.rotate(file, (err, rotatedBase64) => {
  console.log(rotatedBase64)
}, { auto: true })

Camera.isRotated(callback)

判断当前浏览器是否会自动旋转图片。

• 参数:
  • callback 参数为 (rotated)
• 返回值: undefined

Camera.isRotated((rotated) => {
  if (rotated) {
    console.log('The current device may automatically rotate the image.')
  }
})

v2 升级 v3

主要为初始化及回调方法改变：

const supportTypes = 'image/jpeg,image/png'
const onChange = () => {}
const onChanged = () => {}

// **** for version 2.1 ****
const camera = new Camera('#J_Camera', { type: supportTypes }) // init
camera.callback.onChanged = onChanged // handle input changed
camera.callback.onChange = onChange // handle input change

// **** for version 3.0 ****
const el = document.querySelector('#J_Camera')
el.addEventListener('click', () => {
  // 每次调用，必须重新实例化
  new Camera({ type: supportTypes, change: onChange, changed: onChanged })
})

回调区别：

v2 版本为创建输入框覆盖现有按钮，输入框选择图片与上一次一致时，不会触发回调事件。

v3 版本每次均动态创建新的输入框，每次选择图片均会触发回调事件。