lagelalegal / daycaca

🐣 a pure JavaScript library to handle image via canvas

daycaca

A pure JavaScript library to handle image source via canvas.

中文文档 | English | 日本語

examples

How to use

Npm

$  npm install daycaca -save

// es6
import 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.min.js"></script>

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

API

All API methods's argument source should be one type below:

• an image url (Pay attention to CORS settings)
• an IMG element
• a file object Which use input[type="file"] value as source

base64(source, callback)

Convert your image to base64.

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

compress(source, quailty, callback)

Compress your image and minify the size of your image.

• PNG need lossless compression; So the param quality may not work.

• JPG/JPEG/BMP need lossy compression;

quality (1~100). 100 means that the image keeps the same quality.

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

crop(source, option, callback)

Crop your image to the size which you specify.

option {} :

• x: The x-axis distance between the crop area and the image;
• y: The y-axis distance between the crop area and the image;
• w: The width of crop area;
• h: The height of crop area
• ratio: the scale ration of the image

const img = document.querySelector('img')
daycaca.reszie(img, {
  x: 10,
  y: 20,
  w: 100,
  h: 70
},(data) => {
  //... handle base64
})

rotate(source, degree, callback)

Rotate your image to any degree.

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

reszie(source, ratio, callback)

Scale the image;

• ratio (0~1): the scale ratio of the image. 1 means the image keep the same size;

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

Contributions

Your contributions and suggestions are welcome 😄😄🌺🌺🎆🎆

Contributors

• @Annie Tanslations of Japanese documents;

MIT License