Skip to content
/ daycaca Public

๐Ÿฃ a pure JavaScript library to handle image via canvas

Notifications You must be signed in to change notification settings

JackPu/daycaca

Folders and files

NameName
Last commit message
Last commit date

Latest commit

ย 

History

48 Commits
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 

Repository files navigation

daycaca

CircleCI prs wlecome npm

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
  • fixedWidth: get the image with fixed width
  • fixedHieght: get the image with fixed height

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

About

๐Ÿฃ a pure JavaScript library to handle image via canvas

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published