•  

CropImgBox 图片裁剪工具,可以裁剪后可对图片做特效处理

2017-06-25

CropImgBox API


效果



演示地址:https://lazyperson.github.io/cropImgBox/example/



CropImgBox 插件 Amaze UI 样式移植。


使用说明:

  1. 获取 Amaze UI CropImgBox
  1. 在 Amaze UI 样式之后引入 CropImgBox 样式(dist 目录下的 CSS):

Amaze UI CropImgBox 依赖 Amaze UI 样式。

<link rel="stylesheet" href="path/to/amazeui.min.css"/>
<link rel="stylesheet" href="path/to/amazeui.cropimgbox.min.css"/>
  1. 引入 CropImgBox 插件(dist 目录下的 JS):
<script src="path/to/jquery.min.js"></script>
<script src="path/to/cropimgbox.min.js"></script>
  1. 初始化 CropImgBox:

$(function() { var options = {
  		thumbBox: '.cropimgbox-thumbBox',
  		spinner: '.cropimgbox-spinner',
  		imgSrc: '' } var cropper = $('.cropimgbox-imageBox').cropimgbox(options);
});




选项

选项 类型 默认值 描述
thumbBox string '' 选取框对象
spinner string '' 图像展示对象
expandRatio integer 1.1 放大倍率
narrowRatio integer 0.9 缩小倍率

方法

// init a cropimgbox var options = {
    thumbBox: '.cropimgbox-thumbBox',
    spinner: '.cropimgbox-spinner',
    imgSrc: '' } var cropper = $('.cropimgbox-imageBox').cropimgbox(options); // Get the imgs cropper.getDataURL(function (arrs) {
}) // expand image cropper.zoomIn(); // narrow image cropper.zoomOut(); //converted base64 to Blod for upload files cropper.getBlob(i);


方法 参数 描述
cropimgbox options : object 初始化 cropimgbox
getDataURL callback 获取截取变换后的图像base64数组
zoomIn 放大
zoomOut 缩小
getBlob i:int 将base64转化为Blob,i为数组的下标



查看文档 进入下载界面
申明:本文受法律保护,未经作者同意不得用于商业用途,如转载请说明出处!
评论