photo-magician

🎨 Provide some common image process apis with canvas

React Version

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 = new photoMagician()
    magician.toBase64Url({cover:"YOUR_IMG_URL"})
</script>

Screenshots

Example

https://lijinke666.github.io/photo-magician/

Usage

ES6

import photoMagician from "photo-magician";
const magician = new photoMagician();
 
magician.toBase64Url({ cover: "YOUR_IMG_URL" });

No ES6

const photoMagician = require("photo-magician");
const magician = new photoMagician();
 
magician.toBase64Url({ cover: "YOUR_IMG_URL" });

set config

// set out put image data quality  [ 0 - 1 ]
 
magician.setConfig({
  imageQuality: 0.4
});

Return to the promise

//use ES6
magician
  .toBase64Url({
    cover: baseImageUrl
  })
  .then(data => {
    console.log("image data:", data);
  })
  .catch(error => {
    console.error("toBase64Url error", err);
  });
 
//use ES7
async () => {
  const data = await magician.toBase64Url({
    cover: baseImageUrl
  });
  console.log("image data:", data);
};

outputType

async () => {
  // outputType = 'dataUrl'  default
  const data = await magician.toBase64Url({
    cover: baseImageUrl,
    outputType: "dataUrl"
  });
  console.log("image data:", data);
 
  // outputType = 'blob'
  const blob = await magician.toBase64Url({
    cover: baseImageUrl,
    outputType: "blob"
  });
  console.log("image blob:", URL.createObjectURL(blob));
};

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 {Object} options 
 * @param {String | Object} options.cover cover url | image element node   The next cover parameter is the same as this.
 * @return base64 data
 */
magician.toBase64Url({
  cover: baseImageUrl
});
 
/**
 * @name getPrimaryColor
 * @description get primary color of the image
 * @param {Object} options 
 * @param {String | Object} options.cover
 * @return primaryColor
 */
 
magician.getPrimaryColor({
  cover: watermark
});
 
/**
 * @name compressImage()
 * @description compress of the image
 * @param {Object} options 
 * @param {String | Object} options.cover
 * @param {Number}  options.quality range(0-1) default '0.92'
 * @return base64 data
 */
magician.compressImage({
  cover: baseImageUrl,
  quality: 0.12
});
 
/**
 * @name clipImage()
 * @description cut clip of the image
 * @param {object} Options 
 * @param {String | Object} options.cover
 * @param {Number} options.scale Image zooming   default '1.0'
 * @param {Array} options.coordinate [[x1,y1],[x2,y2]]
 * @return base64 data
 */
magician.clipImage({
  cover: baseImageUrl,
  scale: 1.0,
  coordinate: [[200, 200], [[300, 300]]
});
 
/**
 * @name rotateImage()
 * @description Rotate the image
 * @param {String | Object} cover 图片地址或节点
 * @param {Number} rotate 旋转比例 (0 -360 ) °
 */
magician.rotateImage({
  cover: baseImageUrl,
  rotate: 20
});
 
/**
 * @name addWaterMark
 * @description Add text or picture watermark to the image.
 * @param {Object} options 
 * @param {String | Object} options.cover
 * @param {String} options.waterMark waterMark
 * @param {String} options.mode "image | text"  Specify whether it is a image or a text. [default 'text']
 * @param {Boolean} options.fontBold If it's text, then bold [default 'true']
 * @param {Number} options.fontSize If it's text, what font size is it?  [default 20]
 * @param {String} options.fontColor if it's text, If it's text, what font color is it? [default'rgba(255,255,255,.5)']
 * @param {Number} options.width if it's image what width of the image [default '50']
 * @param {NUmber} options.height if it's image what height of the image [default '50']
 * @param {NUmber} options.opacity opacity of the image  [default '0.5']
 * @param {Array} options.coordinate [x,y] [default '[0,0]']
 */
magician.addWaterMark({
  cover: baseImageUrl,
  mode: "image",
  waterMark: watermark,
  width: 60,
  height: 60,
  opacity: 0.8,
  coordinate: [330, 300]
});
 
/**
 * @name addWaterMark
 * @param Same as above
 */
magician.addWaterMark({
  cover: baseImageUrl,
  mode: "text",
  waterMark: "photo-magician.js",
  fontBold: false,
  fontSize: 20,
  fontColor: "#396",
  coordinate: [10, 20]
});
 
/**
 * @name addImageFilter
 * @param {Object} options 
 * @param {String | Object} options.cover
 * @param {String} options.mode  filter name  "vintage" | "blackWhite" | "relief" | "blur"
 */
magician.addImageFilter({
  cover: baseImageUrl,
  mode: "vintage"
});

License

MIT