<script src="scripts/pixi.js"></script>
<script src="scripts/hammer.js"></script>
<script src="scripts/photo-editor.js"></script>
<script>
photoEditor.init();
</script>
photoEditor.init({
width: 500,
height: 500,
bgColor: 0xBBBBBB,
$canvasEl: '#canvas',
autoFixStage: true,
animated: true,
touched: true
});
- width: (default: 500) 宽度
- height: (default: 500) 高度
- bgColor: (default: 0xBBBBBB) canvas背景色
- $canvasEl: (default: '#canvas') canvas元素节点
- autoFixStage: (default: true) 图片在stage中全屏显示
- animated: (default: true) 开启页面动画
- touched: (default: true) 开启手势事件
/**
* 添加图片元素
* @param {String} fileInput 图片路径
*/
photoEditor.addSprite(fileInput)
/**
* 删除图片
* @param {Object} [sprite=current] 需要删除的sprite
*/
photoEditor.removeSprite(sprite)
/**
* 是否开启页面动画,用于canvas实时刷新
*/
photoEditor.switchAnimate()
/**
* 是否开启手势事件
*/
photoEditor.switchTouchEvent()
/**
* 添加滤镜
* @param {String} type 图片分类
* @param {Array} filters 滤镜数组
*/
photoEditor.addFilter(type, filters)
/**
* 导出stage
* @param {string} [type='image/jpeg'] 图片格式
* @param {Number} [encoderOptions=0.92] 图片质量,取值范围为 0 到 1
* @return {string} 图片转成Base64格式字符串
*/
photoEditor.renderStage()