photo-magician
🎨 Provide some common image process apis with canvas
Installation
using yarn
:
yarn add photo-magician
using npm
:
npm install photo-magician --save
using in the browser :
<script src="photoMagician.min.js"></script><script> const magician = magician</script>
Screenshots
Example
https://lijinke666.github.io/photo-magician/
Usage
ES6
;const magician = ; magician;
No ES6
const photoMagician = ;const magician = ; magician;
set config
// set out put image data quality [ 0 - 1 ] magician;
Return to the promise
//use ES6magician ; //use ES7async { const data = await magician; console;};
outputType
async { // outputType = 'dataUrl' default const data = await magician; console; // outputType = 'blob' const blob = await magician; console;};
Development
git clone https://github.com/lijinke666/photo-magician.git
npm install | yarn
npm start
API
/** * @name toBase64Url * @description get base64 data of the image * @param * @param {String | Object} options.cover cover url | image element node The next cover parameter is the same as this. * @return base64 data */magician; /** * @name getPrimaryColor * @description get primary color of the image * @param * @param {String | Object} options.cover * @return primaryColor */ magician; /** * @name compressImage() * @description compress of the image * @param * @param {String | Object} options.cover * @param * @return base64 data */magician; /** * @name clipImage() * @description cut clip of the image * @param * @param {String | Object} options.cover * @param * @param * @return base64 data */magician; /** * @name rotateImage() * @description Rotate the image * @param {String | Object} cover 图片地址或节点 * @param */magician; /** * @name addWaterMark * @description Add text or picture watermark to the image. * @param * @param {String | Object} options.cover * @param * @param * @param * @param * @param * @param * @param * @param * @param */magician; /** * @name addWaterMark * @param Same as above */magician; /** * @name addImageFilter * @param * @param {String | Object} options.cover * @param */magician;