daycaca
v1.0.11
Published
a pure JavaScript lib to handle image via canvas
Downloads
140
Readme
daycaca
キャンバスを介して Canvas ソースを処理するための純粋な JavaScript ライブラリ。
使い方
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
})
コメント
ご意見やご質問大歓迎です!