daycaca
a pure JavaScript lib to handle image via canvas
Last updated 3 years ago by jack_pu .
ISC · Repository · Bugs · Original npm · Tarball · package.json
$ cnpm install daycaca 
SYNC missed versions from official npm registry.

daycaca

CircleCI npm

キャンバスを介して Canvas ソースを処理するための純粋な JavaScript ライブラリ。

中文文档 | English | 日本語

examples

使い方

Npm

$  npm install daycaca --save
// es6import daycaca from 'daycaca';// src specify an image src (url or base64)
daycaca.rotate(src, degress, (data, w, h) => {
  // your code here
});

CDN (ブラウザーで直接使う)

<script src="./dist/daycaca.js"></script>
<script>
  // src specify an image src (url or base64)
  daycaca.rotate(src, degress, (data, w, h) => {
    // your code here
  });</script>

API

すべてのAPI source は以下の1つのタイプでなければなりません:

  • 画像url (URLを使う場合、クロスドメインの設置にお気を付けください。)
  • 画像のDOM節点
  • [type="file"]を使用する画像ファイルの対象值

base64(source, callback)

画像をbase64 code値に転換する。参考数elは画像のDOM節点やDOMのURLである。

const img = document.querySelector('img')
daycaca.base64(img, (data) => {
  //... handle base64
})

compress(source, quailty, callback)

画像を圧縮する場合、画質を圧縮し、画像のサイズを小さくする。

  • PNGは無損失圧縮されるので、quality無効。
  • JPG/JPEG/BMP は損失圧縮される。

quality は圧縮後の画質を表す。Qualityの数値が大きいほど、画質が高いのである。

const img = document.querySelector('img')daycaca.compress(img, 0.5,(data) => {
  //... handle base64
})

crop(source, option, callback)

画像をカットする。

option {} では、指定する必要がある参考数値である:

  • x;はカットされたエリアが画像の左までの距離
  • y;はカットされたエリアが画像の上までの距離
  • w;はカットされたエリアの横幅
  • h;はカットされたエリアの高度
  • ratio: スケール比率;
const img = document.querySelector('img')
daycaca.reszie(img, {
  x: 10,
  y: 20,
  w: 100,
  h: 70
},(data) => {
  //... handle base64
})

rotate(source, degree, callback)

画像を回転させる。

const img = document.querySelector('img')
daycaca.rotate(img, 90,(data) => {
  //... handle base64
})

reszie(source, ratio, callback)

画像を拡大、縮小させる;

  • ratio (0~1)は画像のスケール比率である。1と設定する場合は、画像の大きさが変わらない。0以下の数値は設定できない。
const img = document.querySelector('img')
daycaca.reszie(img, 0.5,(data) => {
  //... handle base64
})

コメント

ご意見やご質問大歓迎です!

Current Tags

  • 1.0.11                                ...           latest (2 years ago)

14 Versions

  • 1.0.11                                ...           2 years ago
  • 1.0.10                                ...           2 years ago
  • 1.0.9                                ...           2 years ago
  • 1.0.8                                ...           2 years ago
  • 1.0.7                                ...           2 years ago
  • 1.0.6                                ...           2 years ago
  • 1.0.5                                ...           2 years ago
  • 1.0.4                                ...           2 years ago
  • 1.0.3                                ...           2 years ago
  • 1.0.2                                ...           2 years ago
  • 1.0.1                                ...           3 years ago
  • 0.1.2                                ...           3 years ago
  • 0.1.1                                ...           3 years ago
  • 0.1.0                                ...           3 years ago
Maintainers (1)
Downloads
Today 25
This Week 209
This Month 389
Last Day 43
Last Week 160
Last Month 1,042
Dependencies (0)
None
Dev Dependencies (14)

Copyright 2014 - 2017 © taobao.org |