angular-image-cropper, 用于裁剪图像的AngularJS指令

分享于 

5分钟阅读

GitHub

  繁體 雙語
AngularJS directive for cropping images.
  • 源代码名称:angular-image-cropper
  • 源代码网址:http://www.github.com/bcabanes/angular-image-cropper
  • angular-image-cropper源代码文档
  • angular-image-cropper源代码下载
  • Git URL:
    git://www.github.com/bcabanes/angular-image-cropper.git
    Git Clone代码到本地:
    git clone http://www.github.com/bcabanes/angular-image-cropper
    Subversion代码到本地:
    $ svn co --depth empty http://www.github.com/bcabanes/angular-image-cropper
    Checked out revision 1.
    $ cd repo
    $ svn up trunk
    

    traviscodecovversiondownloadsMIT Licensesemantic-releaseCommitizen friendly

    Angular 图像 cropper

    实时示例

    要查看一个实时示例,请转到演示文档的页面。

    描述

    Angular 图像 cropper inspired受欢迎的裁剪jQuery插件,允许收费 缩放或者旋转图片选择裁剪区域。 像选择配置文件图片或者头像的显示区域。

    • 响应: 窗口( 或者选择区域) 完全响应( 流体)
    • 触控支持: 拖动图像也可以在触摸屏上工作
    • 提供了一个API来执行更多的代码操作
    • 不需要jQuery的: 用纯javascript编写

    安装

    使用 Bower ( 不推荐使用) 使用 NPM
    npm install angular-image-cropper
    bower install https://unpkg.com/angular-image-cropper/bower.zip

    或者,如果要安装特定版本( 比如: 1.1.4 ):

    bower install https://unpkg.com/angular-image-cropper@1.1.4/bower.zip --save

    用法

    加载所需文件

    使用模块

    在声明模块的依赖关系时只需要模块:

    var angular =require('angular');
    angular
    . module('myApp', [require('angular-image-cropper')])
    . controller(/*...*/);
    使用脚本标记

    只需在你的index.html 中导入 angular-image-cropper javascript文件:

    <scriptsrc="/path/to/angular-image-cropper.js"></script>

    将模块作为依赖项添加到你的主应用程序模块中,如下所示:

    angular.module('myApp', ['imageCropper']);

    指令

    <image-cropperimage-url="myImageUrlOrBase64"width="640"height="480"show-controls="true"fit-on-init="false"center-on-init="true"api="getApiFunction"crop-callback="myCallbackFunction"check-cross-origin="false"zoom-step="0.1"action-labels="myButtonLabelsObject"></image-cropper>
    命令行选项

    Angular 图像cropper提供了一些简化你的开发的选项:

    • 将被裁剪成的源图像,可以是一个URL或者 base64
    • width 字符串裁剪图像的宽度
    • height 字符串裁剪图像的高度
    • zoom-step 字符串缩放步骤
    • fit-on-init 布尔适合cropper初始化的图像( 保持比例)
    • center-on-init 布尔在cropper初始化中镜像图像
    • ( 缺省情况下,显示或者不显示控件按钮)
    • check-cross-origin 布尔启用交叉原点或者不启用
    • 使用base64裁剪的图像作为参数时,在单击裁剪控件时执行的函数的函数函数
    vm.updateResultImage=function(base64) {
     vm.resultImage= base64;
     $scope.$apply(); // Apply the changes.};
    • api 函数函数作为参数的函数
    • 通过传递对象来定制按钮标签的能力,比如
    vm.myButtonLabels= {
     rotateLeft:' (rotate left) ',
     rotateRight:' (rotate right) ',
     zoomIn:' (zoomIn) ',
     zoomOut:' (zoomOut) ',
     fit:' (fit) ',
     crop:' <span class="fa fa-crop">[crop]</span> '// You can pass html too.}
    Api

    Angular 图像布尔运算让你访问 api,你可以在这里看到一个示例 :

    // Cropper API available when image is ready.vm.getCropperApi=function(api) {
     api.zoomIn(3);
     api.zoomOut(2);
     api.rotate(270);
     api.fit();
     vm.resultImage=api.crop();
    };
    • crop 函数在 base64 中返回裁剪图像
    • fit 函数将图像与包装尺寸相匹配( 保持比例)
    • rotate 函数应用with度的旋转,应该是 90的模,可以是负数
    • zoomIn 函数应用给定的zoomIn
    • zoomOut 函数应用给定的放大率
    • remove 功能除去 cropper

    许可证

    麻省理工学院许可证( MIT )


    相关文章